前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >实现一个Promise之基础、异步

实现一个Promise之基础、异步

作者头像
wade
发布2020-04-24 13:05:25
2340
发布2020-04-24 13:05:25
举报
文章被收录于专栏:coding个人笔记

其实跟着promise a+一步一步,按照顺序实现一个promise并不难,今天先实现最简单的promise和异步resolve。本来想全部一次性写完,想想还是分开走,希望想学的可以敲几遍。

代码语言:javascript
复制
//promise三个状态
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';
class Promise {
 constructor(executor){
  //状态
  this.state = PENDING;
  //成功值 失败值 默认undefined
  this.value = undefined;
  this.reason = undefined;
  //简易发布订阅,实例可以then多次,用数组
  this.onResolvedCallbacks = [];
  this.onRejectedCallbacks = [];
  //成功方法
  let resolve = (value) => {
   if(this.state === PENDING){
    this.state = FULFILLED;
    this.value = value;
    this.onResolvedCallbacks.forEach(fn => fn());
   }
  };
  //失败方法
  let reject = (reason) => {
   if(this.state === PENDING){
    this.state = REJECTED;
    this.reason = reason;
    this.onRejectedCallbacks.forEach(fn => fn());
   }
  };
  //立即执行,如果有错误直接执行失败方法
  try{
   executor(resolve, reject);
  }catch (e) {
   reject(e);
  }
 }
 //then方法,一个成功函数,一个失败函数
 then(onFulfilled, onRejected){
  //如果成功,执行成功函数
  if(this.state === FULFILLED){
   onFulfilled(this.value);
  };
  //如果失败,执行失败函数
  if(this.state === REJECTED){
   onRejected(this.reason);
  };
  //如果有异步,订阅成功失败函数
  if(this.state === PENDING){
   this.onResolvedCallbacks.push(() => {
    onFulfilled(this.value);
   });
   this.onRejectedCallbacks.push(() => {
    onRejected(this.reason);
   });
  };
 }
}

最简单的实现,可以理解理解。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-03-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档