手写Promise

手写Promise这种文章应该已经烂大街了，不过为了加深自己的理解，还是决定写一篇文章，哈哈，有错误之处，恳请指出，相互学习。Promise/A+ 规范

1.搭建框架

先来看看原生promise实例的创建：

let promise=new Promise((resolve,reject)=>{
  resolve(666)
})
promise.then((value)=>{
  console.log(value)
},err=>{
  console.log(err)
})

从上面我们可以看到，构造函数里面会传入一个函数，包括两个方法resolve，reject，这两个方法都是javascript内部提供给我们的，并不是我们自己写的。resolve方法在异步操作成功时执行，并将异步操作的结果作为参数传递出去；reject放在在异步操作失败的情况下执行，并将执行的错误信息作为参数传递出去。
Promise还提供了一个then的方法，通过打印promise实例可以看出，该方法是挂在原型对象上的。then方法里面可以接受两个回调函数作为参数。第一个为运行成功时的调用，第二个为失败时的调用。这两个函数是可选的。这两个函数的参数就是resolve，reject函数传出的值。
基于此，我们来搭建自己的Promise，把它命名为MyPromise,首先的大致框架如下，下面再一步步的往里面填：

const PENDING="pending"
const REJECTED="rejected"
const RESOLVED="resolved"
class MyPromise {
  //构造函数
  constructor(excutor){
    this.value=null
    this.status=PENDING
    let resovle=(value)=>{
      if(this.status===PENDING){
        this.status=RESOLVED
        this.value=value
      }
    }
    let reject=(value)=>{
      if(this.status===PENDING){
        this.status=REJECTED
        this.value=value
      }
    }
    try {
      excutor(resovle,reject)
    } catch (error) {
      reject(error)
    }
  }
  then(onResolved,onRejected){
    //status状态为resolved时，执行
    if(this.status===RESOLVED){
     onResolved(this.value)
    }
    //status状态为rejected时，执行
    if(this.status===REJECTED){
      onRejected(this.value)
    }
  }
}

2. 慢慢填坑

上面的then方法中，onResolved,onRejected可能传入的不是函数，或者没有传，此时我们需要对其判断一下，还有就是在执行onResolved,onRejected方法内部报错的时候，统一交给onRejected处理。所以上面的方法改造为：

 then(onResolved, onRejected) {
    if (typeof onResolved !== "function") {
      onResolved = () => this.value;
    }
    if (typeof onRejected !== "function") {
      onRejected = () => this.value;
    }
    if (this.status === RESOLVED) {
      try {
        onResolved(this.value);
      } catch (error) {
        onRejected(error);
      }
    }
    if (this.status === REJECTED) {
      try {
        onRejected(this.value);
      } catch (error) {
        onRejected(error);
      }
    }
  }

像这样改造之后，我们这样执行就会没有问题

promise.then().then(
  value => console.log(value),
  error => {}
);

下面我们来运行一下我们自己创建的这个MyPromise函数，试试效果怎么样：


image.png

可以看到，正确的打印了666，但是能不能处理异步代码呢，我们在试试


image.png

从上面的图，我们看到，啥都没有输出，那么就是不能处理异步代码。其实在上面的代码中当我们执行到then方法的时候，上面的setTimeout里的代码并没有执行，因为其是宏任务，会在下一个事件循环中去执行。在then方法中，并没有对status为pending时作处理，所以不会输出任何东西。要想正确处理，我们需要先保存执行函数，当status状态改变的时候再去执行相应的处理函数。

 constructor(excutor) {
    this.value = null;
    this.status = PENDING;
    this.callbacks=[]
    let resovle = value => {
      if (this.status === PENDING) {
        this.status = RESOLVED;
        this.value = value;
        this.callbacks.map(func=>{
          func.onResolved(value)
        })
      }
    };
    let reject = value => {
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.value = value;
        this.callbacks.map(func=>{
          func.onRejected(value)
        })
      }
    };
    try {
      excutor(resovle, reject);
    } catch (error) {
      reject(error);
    }
  }
 then(onResolved, onRejected) {
    if (typeof onResolved !== "function") {
      onResolved = () => this.value;
    }
    if (typeof onRejected !== "function") {
      onRejected = () => this.value;
    }
    if(this.status===PENDING){
      this.callbacks.push({
        onResolved:(value)=>{
          try {
            onResolved(value)
          } catch (error) {
            onRejected(error)
          }
        },
        onRejected:(value)=>{
          try {
            onRejected(value)
          } catch (error) {
            onRejected(error)
          }
        }
      })
    }
    if (this.status === RESOLVED) {
        try {
          onResolved(this.value);
        } catch (error) {
          onRejected(error);
        }
    }
    if (this.status === REJECTED) {
        try {
          onRejected(this.value);
        } catch (error) {
          onRejected(error);
        }
    }
  }

此时在执行上面的代码，看到已经可以正确的执行：


image.png

我们都知道promise是一个微任务，他会在主线程同步代码执行完之后，再执行，那么我们看看我们这个呢


image.png

从上图可以看出，他和我们预期的并不一样，并不是异步的。我们可以借助setTimeout将onResolved,onRejected变成宏任务去执行。

if (this.status === RESOLVED) {
      setTimeout(() => {
        try {
          onResolved(this.value);
        } catch (error) {
          onRejected(error);
        }
      });
    }
    if (this.status === REJECTED) {
      setTimeout(() => {
        try {
          onRejected(this.value);
        } catch (error) {
          onRejected(error);
        }
      });
    }
image.png

如上，已经达到了我们要的效果了，那么我们再来看看异步任务的时候是不是也能正确输出结果呢


image.png

结果又是错的呢，哈哈，其实到这里，大家应该都知道怎么处理了吧，和上面的一样，我们只需要把异步执行时收集起来的函数也放在setTimeout中执行，应该就可以，那我们就试试看吧。

  constructor(excutor) {
    this.value = null;
    this.status = PENDING;
    this.callbacks=[]
    let resovle = value => {
      if (this.status === PENDING) {
        this.status = RESOLVED;
        this.value = value;
        setTimeout(()=>{
          this.callbacks.map(func=>{
            func.onResolved(value)
          })
        })
      }
    };
    let reject = value => {
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.value = value;
        setTimeout(()=>{
          this.callbacks.map(func=>{
            func.onRejected(value)
          })
        })
      }
    };
    try {
      excutor(resovle, reject);
    } catch (error) {
      reject(error);
    }
  }
image.png

可以看到，运行结果已经正确

3. 链式调用

我们都知道promise是可以链式调用的，其实也就是promise的then函数返回一个promise对象，把上一次的结果通过resolve或者reject函数返回出去，这样就可以达到链式调用的效果。

then(onResolved, onRejected) {
    if (typeof onResolved !== "function") {
      onResolved = () => this.value;
    }
    if (typeof onRejected !== "function") {
      onRejected = () => this.value;
    }
    return new MyPromise((resolve,reject)=>{
      if(this.status===PENDING){
        this.callbacks.push({
          onResolved:(value)=>{
            try {
              let result=onResolved(value)
              resolve(result)
            } catch (error) {
              reject(error)
            }
          },
          onRejected:(value)=>{
            try {
              let result=onRejected(value)
              resolve(result)
            } catch (error) {
              reject(error)
            }
          }
        })
      }
      if (this.status === RESOLVED) {
        setTimeout(() => {
          try {
            let result=onResolved(this.value);
            resolve(result)
          } catch (error) {
            reject(error)
          }
        });
      }
      if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let result=onRejected(this.value);
            resolve(result)
          } catch (error) {
            reject(error)
          }
        });
      }
    })
  }

我们可以测试一下：


image.png

已经达到了链式调用的效果，但是在then函数中我们也可以再次返回Promise对象,这个试试会是啥效果呢，我们打印一下看看


image.png

而 原生的Promise的执行效果如下：
image.png

由此可知，我们必须对返回的类型进行判断，如果是Promise类型，我们需要对其执行then方法，把当前的resolve和reject方法传入即可，如果是其他类型则 执行直接resolve或者reject其值即可。分析清楚了之后，我们再一次修改代码如下：

 then(onResolved, onRejected) {
    if (typeof onResolved !== "function") {
      onResolved = () => this.value;
    }
    if (typeof onRejected !== "function") {
      onRejected = () => this.value;
    }
    return new MyPromise((resolve,reject)=>{
      if(this.status===PENDING){
        this.callbacks.push({
          onResolved:(value)=>{
            try {
              let result=onResolved(value)
              if(result instanceof MyPromise){
                result.then(resolve,reject)
              }else{
                resolve(result)
              }
              
            } catch (error) {
              reject(error)
            }
          },
          onRejected:(value)=>{
            try {
              let result=onRejected(value)
              if(result instanceof MyPromise){
                result.then(resolve,reject)
              }else{
                resolve(result)
              }
            } catch (error) {
              reject(error)
            }
          }
        })
      }
      if (this.status === RESOLVED) {
        setTimeout(() => {
          try {
            let result=onResolved(this.value);
            if(result instanceof MyPromise){
              result.then(resolve,reject)
            }else{
              resolve(result)
            }
          } catch (error) {
            reject(error)
          }
        });
      }
      if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let result=onRejected(this.value);
            if(result instanceof MyPromise){
              result.then(resolve,reject)
            }else{
              resolve(result)
            }
          } catch (error) {
            reject(error)
          }
        });
      }
    })
  }

再把上面的测试代码执行一遍，发现已经得到我们要的效果


image.png

写到这里其实已经差不多了，还有一点就是then方法返回的promise对象不能是then相同的promise,会报循环引用的错误，我们来看下原生的promise对象的执行效果如何，如下图：


image.png

那么我们需要对返回的promise进行判断就可以 
let result = onResolved(value);
if (result === promise) {
     throw new TypeError("Chaining cycle detected for promise");
 }

最后我们再来执行一下代码看看：


image.png

已经达到我们想要的结果
好了，分析就到这里，如果错误的地方，欢迎指出来，一起学习进步！

下面贴出完整的代码：

const PENDING = "pending";
const REJECTED = "rejected";
const RESOLVED = "resolved";
class MyPromise {
  //构造函数
  constructor(excutor) {
    this.value = null;
    this.status = PENDING;
    this.callbacks = [];
    let resovle = value => {
      if (this.status === PENDING) {
        this.status = RESOLVED;
        this.value = value;
        setTimeout(() => {
          this.callbacks.map(func => {
            func.onResolved(value);
          });
        });
      }
    };
    let reject = value => {
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.value = value;
        setTimeout(() => {
          this.callbacks.map(func => {
            func.onRejected(value);
          });
        });
      }
    };
    try {
      excutor(resovle, reject);
    } catch (error) {
      reject(error);
    }
  }
  then(onResolved, onRejected) {
    if (typeof onResolved !== "function") {
      onResolved = () => this.value;
    }
    if (typeof onRejected !== "function") {
      onRejected = () => this.value;
    }
    let promise = new MyPromise((resolve, reject) => {
      if (this.status === PENDING) {
        this.callbacks.push({
          onResolved: value => {
            try {
              let result = onResolved(value);
              if (result === promise) {
                throw new TypeError("Chaining cycle detected for promise");
              }
              if (result instanceof MyPromise) {
                result.then(resolve, reject);
              } else {
                resolve(result);
              }
            } catch (error) {
              console.log(error);
              reject(error);
            }
          },
          onRejected: value => {
            try {
              let result = onRejected(value);
              if (result === promise) {
                throw new TypeError("Chaining cycle detected for promise");
              }
              if (result instanceof MyPromise) {
                result.then(resolve, reject);
              } else {
                resolve(result);
              }
            } catch (error) {
              console.log(error);
              reject(error);
            }
          }
        });
      }
      if (this.status === RESOLVED) {
        setTimeout(() => {
          try {
            let result = onResolved(this.value);
            if (result === promise) {
              throw new TypeError(" Chaining cycle detected for promise");
            }
            if (result instanceof MyPromise) {
              result.then(resolve, reject);
            } else {
              resolve(result);
            }
          } catch (error) {
            console.log(error);
            reject(error);
          }
        });
      }
      if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let result = onRejected(this.value);
            if (result === promise) {
              throw new TypeError("Chaining cycle detected for promise");
            }
            if (result instanceof MyPromise) {
              result.then(resolve, reject);
            } else {
              resolve(result);
            }
          } catch (error) {
            console.log(error);
            reject(error);
          }
        });
      }
    });
    return promise;
  }
}

let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(666);
    console.log("promise")
  });
});
 promise.then(
  value => {
    console.log(value);
    return 888;
  },
  err => {
    console.log(err);
  }
).then()
.then(value=>{
  console.log(value)
})
console.log("main")

补充更新，上面是实现了一个基本的Promise,下面补充几个静态方法的实现：

  1. resolve
  2. reject
  3. all
  4. race
  static resolve(value) {
    return new MyPromise((resolve, reject) => {
      if (value instanceof MyPromise) {
        value.then(resolve, reject);
      } else {
        resolve(value);
      }
    });
  }
  static reject(value) {
    return new MyPromise((resolve, reject) => {
      reject(value);
    });
  }
  static all(promises) {
    let resolves = [];
    return new MyPromise((resolve, reject) => {
      promises.forEach((p,index) => {
        MyPromise.resolve(p).then(   //1.修正p.then
          (value) => {
            resolves[index]=value  //2.修正 resolves.push(value)
            if (resolves.length === promises.length) {
              resolve(resolves);
            }
          },
          (error) => {
            reject(error);
          }
        );
      });
    });
  }
  static race(promises){
    return new MyPromise((resolve,reject)=>{
      promises.map(p=>{
        p.then(value=>{
          resolve(value)
        })
      })
    })
  }

ps:修正promise.all方法，第一处的修正是应为传入中的参数不一定都是promise对象，可能是个普通值，所以需要用promise.resolve转换一下；第二处是为了保证返回的结果与传入参数的顺序一致

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,468评论 5赞 473
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,620评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,427评论 0赞 334
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,160评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,197评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,334评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,775评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,444评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,628评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,210评论 3赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,767评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2赞 341

推荐阅读更多精彩内容

  • JaveScript中的Promise对象
    前言 本文旨在简单讲解一下javascript中的Promise对象的概念，特性与简单的使用方法。并在文末会附上一...
    _暮雨清秋_阅读 2,178评论 0赞 3
  • 手写Promise
    Promise的声明 首先，promise肯定是一个类，我们就用class来声明。 由于new Promise((...
    oWSQo阅读 230评论 0赞 1
  • 手写Promise
    参考：Promise实现原理（附源码） promise的注意点： Promise特点 1.状态不可变 2.值穿透，...
    疯狂吸猫阅读 302评论 0赞 1
  • Promise笔记
    Promise学习（上）： 资料： JavaScript Promise迷你书 原著：azu / 翻译：liubi...
    你隔壁的陌生人阅读 555评论 0赞 1
  • 我的媳妇我的妈
    如果不是我的妈，我可能娶不上我这个媳妇。 八零后的我，却有着和我妈一样的学历——初中，甚至还不如我妈，初中还没有读...
    细姐姐阅读 1,094评论 4赞 15