手写Promise

promise为es6新增加的用于处理异步的方法

先上代码

class MyPromise {
  PENDING = "PENDING"; // 等待状态
  SUCCESS = "SUCCESS"; // 成功状态
  FAIL = "FAIL"; // 失败状态
  constructor(fn) { // 此处的fn为构建promise时的方法
    this.state = MyPromise.PENDING; // promise的状态
    this.value = undefined; // 用于存放成功回调需要的参数
    this.reason = undefined; // 用于存放失败回调需要的参数
    this.successCallbacks = []; // 成功回调数组
    this.failCallbacks = []; // 失败回调数组
    let resolve = (value) => { // 触发成功回调
      if (this.state === MyPromise.PENDING) {
        this.state = MyPromise.SUCCESS; // 先将状态变更为成功
        this.value = value; // 将参数存起来
        this.successCallbacks.forEach((item) => item()); // 循环调用成功回调
      }
    };

    let reject = (reason) => {
      if (this.state === MyPromise.PENDING) {
        this.state = MyPromise.FAIL;
        this.reason = reason;
        this.failCallbacks.forEach((item) => item());
      }
    };

    try {
      fn(resolve, reject); // 直接运行传入的函数
    } catch (error) {
      reject(error);
    }
  }

  then(success, fail) { // 将成功函数和失败函数放到对应数组中
    if (this.state === MyPromise.PENDING) {
      this.successCallbacks.push(() => success(this.value));
      this.failCallbacks.push(() => fail(this.reason));
    }
  }
}

let a = new MyPromise((resolve, reject) => {
  console.log(1111111);
  setTimeout(() => {
  	resolve(2222222);
    reject(3333333);
  }, 5000);
});

a.then(
  (res) => console.log("res", res),
  (err) => {
    console.log("err", err);
  }
);

梳理逻辑

其实内部逻辑分为2个部分

1. 第一个是通过then函数将对应的回调放到对应的数组中
2. 当调用resolve函数时，运行之前放到回调数组中的函数