乐趣区

关于javascript:5K字-由浅入深聊聊Promise实现原理

作者：

jiezi

在

前言

大家好，我是梁木由，是一个有想头的前端。这几天再回顾基础知识时，对Promise有了较为深刻的了解，那明天就来分享下怎么由浅入深的把握Promise并且学会手写Promise

概念

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更正当和更弱小。它由社区最早提出和实现，ES6 将其写进了语言规范，对立了用法，原生提供了Promise对象。

所谓Promise，简略说就是一个容器，外面保留着某个将来才会完结的事件（通常是一个异步操作）的后果。从语法上说，Promise 是一个对象，从它能够获取异步操作的音讯。Promise 提供对立的 API，各种异步操作都能够用同样的办法进行解决。

Promise 拉进去单练

那咱们先把Promise拉进去练练，看看是什么玩意，在控制台中打印看下

在上图能够看出什么信息呢，那咱们列举下

  • 首先咱们看出在new Promise时，须要传入一个回调函数
  • 它是一个类，并且会返回一个Promise对象
  • 那还能够看出它有constructor构造函数，还有catch、finally、then三个办法

那咱们根据上述剖析出的信息，简略实现一下

class CustomPromise {
  constructor(callBack) {
  }
  catch() {
  }
  then() {
  }
  finally() {
  }
}
const customPromise = new CustomPromise()
console.log(customPromis)

看下咱们本人简略实现的输入后果

那咱们再写一个Promise的惯例用法

const promise = new Promise((resolve, reject) => {
  console.log("hellow Promise");
});
console.log(promise);

那咱们来看看打印后果，能剖析出什么后果

  • hellow promise 在控制台被输入了，那是不是说咱们传入的回调函数被立刻执行了，那阐明传入的是一个执行器

那再改良一下咱们的CustomPromise

class CustomPromise {
  constructor(executor) {
      executor()
  }
  catch() { }
  then() { }
  finally() { }
}
const customPromise = new CustomPromise((resolve, reject) => {
  console.log('hellow Promise')
})
console.log(customPromise)

Promise基本原理与基本特征

那咱们来看看咱们所熟知的Promise的基本原理

  • 首先咱们在调用Promise时，会返回一个Promise对象。
  • 构建Promise对象时，须要传入一个executor函数，Promise的次要业务流程都在executor函数中执行。
  • 如果运行在excutor函数中的业务执行胜利了，会调用resolve函数；如果执行失败了，则调用reject函数。
  • Promise的状态不可逆，同时调用resolve函数和reject函数，默认会采取第一次调用的后果。

联合Promise/A+标准，咱们还能够剖析出哪些基本特征

Promise/A+的标准比拟多，在这列出一下外围的标准。Promise/A+标准

  • promise有三个状态：pending，fulfilled，rejected，默认状态是pending。
  • promise有一个value保留胜利状态的值，有一个reason保留失败状态的值，能够是undefined/thenable/promise。
  • promise只能从pending到rejected, 或者从pending到fulfilled，状态一旦确认，就不会再扭转。
  • promise 必须有一个then办法，then接管两个参数，别离是promise胜利的回调onFulfilled, 和promise失败的回调onRejected。
  • 如果then中抛出了异样，那么就会把这个异样作为参数，传递给下一个then的失败的回调onRejected。

那CustomPromise，还实现不了基本原理的3，4两条，那咱们来依据基本原理与Promise/A+剖析下，还短少什么

  • promise有三个状态：pending，fulfilled，rejected。
  • executor执行器调用reject与resolve两个办法
  • 还须要有保留胜利或失败两个值的变量
  • then接管两个参数，别离是胜利的回调onFulfilled,失败的回调onRejected

那再来改良下CustomPromise

// 定义三个常量示意状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
​
class CustomPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  // resolve和reject为什么要用箭头函数？
  // 如果间接调用的话，一般函数this指向的是window或者undefined
  // 用箭头函数就能够让this指向以后实例对象
  resolve = (value) => {
    this.value = value;
  };
  reject = (value) => {
    this.reason = value;
  };
  // 胜利之后的值
  value = undefined;
  // 失败之后的值
  reason = undefined;
​
  then(onFulfilled,onRejected) {
  }
  catch() {
  }
  finally() {}
}

那咱们依据Promise基本原理看看它原生Promise的成果

new Promise(function (resolve, reject) {
  resolve("胜利");
  reject("失败");
}).then(
  (value) => {
    console.log(value); // 后果为‘胜利’
  },
  (err) => {
    console.log(err);
  }
);
​
new Promise(function (resolve, reject) {
  reject("失败");
  resolve("胜利");
}).then(
  (value) => {
    console.log(value);
  },
  (err) => {
    console.log(err); // 后果为‘失败’
  }
);

能够看出与基本原理一样的成果，那咱们剖析下如何实现这种成果

  • 须要管制promise状态
  • 在then办法里要调用胜利或失败的回调函数
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
​
class CustomPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  // resolve和reject为什么要用箭头函数？
  // 如果间接调用的话，一般函数this指向的是window或者undefined
  // 用箭头函数就能够让this指向以后实例对象
  resolve = (value) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = FULFILLED;
      this.value = value;
    }
  };
  reject = (err) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = REJECTED;
      this.reason = err;
    }
  };
  status = PENDING;
  // 胜利之后的值
  value = undefined;
  // 失败之后的值
  reason = undefined;
​
  then(onFulfilled, onRejected) {
    // 须要判断状态，依据状态抉择解决回调函数
    if (this.status == FULFILLED) {
      onFulfilled(this.value);
    } else if (this.status == REJECTED) {
      onRejected(this.reason);
    }
  }
  catch() {
  }
  finally() {}
}

来测试下CustomPromise

new CustomPromise(function (resolve, reject) {
  resolve("胜利");
  reject("失败");
}).then(
  (value) => {
    console.log(value);// 后果为‘胜利’
  },
  (err) => {
    console.log(err);
  }
);
​
new CustomPromise(function (resolve, reject) {
  reject("失败");
  resolve("胜利");
}).then(
  (value) => {
    console.log(value);
  },
  (err) => {
    console.log(err);// 后果为‘失败’
  }
);
​

Promise.then链式调用

咱们都知到Primose.then是能够链式调用的，那咱们先看看原生成果

const promise = new Promise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
     setTimeout(() => {
        resolve("hellow");
     },3000)
    });
  })
  .then((res) => {
    console.log(res);
    return "promise";
  })
  .then((res) => {
    console.log(res);
  });

输入后果

start
hellow
promise

那咱们来剖析实现一下

  • 首先.then 是须要返回一个Promise
  • 下一个.then 须要拿到上一个.then的返回值
  • 有异步操作的话，后一个回调函数，会期待该Promise对象的状态发生变化，在被调用
  • 有异步操作的话，那就是说有工作队列，须要有收集回调函数的队列
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
​
class CustomPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  // resolve和reject为什么要用箭头函数？
  // 如果间接调用的话，一般函数this指向的是window或者undefined
  // 用箭头函数就能够让this指向以后实例对象
  resolve = (value) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = FULFILLED;
      this.value = value;
​
      // resolve外面将所有胜利的回调拿进去执行
      if (this.onResolvedCallbacks.length) {
        this.onResolvedCallbacks.forEach((fn) => fn());
      }
    }
  };
  reject = (err) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = REJECTED;
      this.reason = err;
      // reject外面将所有失败的回调拿进去执行
      if (this.onFulfilledCallbacks.length) {
        this.onFulfilledCallbacks.forEach((fn) => fn());
      }
    }
  };
  // 存储胜利回调函数
  onResolvedCallbacks = [];
  // 存储失败回调函数
  onFulfilledCallbacks = [];
​
  status = PENDING;
  // 胜利之后的值
  value = undefined;
  // 失败之后的值
  reason = undefined;
​
  then(onFulfilled, onRejected) {
    // 如果不传，就应用默认函数,确保是函数类型
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : (value) => value;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };
​
    const thenCustomPromise = new CustomPromise((resolve, reject) => {
      const resolveCustomPromise = (callBack, value) => {
        try {
          const x = callBack(value);
          // 如果相等了，阐明return的是本人，抛出类型谬误并返回
          if (resolveCustomPromise === x) {
            return reject(new TypeError("类型谬误"));
          }
          // 判断x是不是 CustomPromise 实例对象
          if (x instanceof CustomPromise) {
            // 执行 x，调用 then 办法，目标是将其状态变为 fulfilled 或者 rejected
            // x.then(value => resolve(value), error => reject(reason))
            // 简化之后
            x.then(resolve, reject);
          } else {
            // 一般值
            resolve(x);
          }
        } catch (error) {
          reject(error);
        }
      };
      // 须要判断状态，依据状态抉择解决回调函数
      if (this.status == FULFILLED) {
        resolveCustomPromise(onFulfilled, this.value);
      } else if (this.status == REJECTED) {
        resolveCustomPromise(onRejected, this.reason);
      } else if (this.status == PENDING) {
        // 当状态为pending时,把then回调push进resolve/reject执行队列,期待执行
        this.onResolvedCallbacks.push(() =>
          resolveCustomPromise(onFulfilled, this.value)
        );
        this.onFulfilledCallbacks.push(() =>
          resolveCustomPromise(onRejected, this.reason)
        );
      }
    });
    return thenCustomPromise;
  }
  catch() {}
  finally() {}
}
​

来验证下.then的链式调用

const promise = new CustomPromise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new CustomPromise((resolve, reject) => {
      setTimeout(() => {
        resolve("hellow");
      }, 1000);
    });
  })
  .then((res) => {
    console.log(res);
    return "promise";
  })
  .then((res) => {
    console.log(res);
  });
// 输入后果 start->hellow->promise

Promise.prototype.catch()

是 .then(null, rejection) 或是 .then(undefined, rejection)的别名，用于指定产生谬误时的回调函数

看下原生promise成果

const promise = new Promise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
      reject("hellow");
    });
  })
  .catch(err => {console.log(err); return 'promise'})
  .then(res => console.log(res))

输入后果

start
hellow
promise

根据上述原生catch咱们来剖析下后果

  • 执行.then的onRejected回调函数
  • 并且能够持续链式调用
catch(onFulfilled) {
   return this.then(null, onFulfilled)
}

那咱们来验证下

const promise = new CustomPromise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new CustomPromise((resolve, reject) => {
      reject("hellow");
    });
  })
  .catch((err) => {
    console.log(err);
    return "promise";
  })
  .then((res) => console.log(res));
​
// 输入后果
start
hellow
promise

Promise.resolve()

Promise.resolve(value)返回一个解析过的Promise对象，用法有一个value参数

  • 如果参数是 Promise 实例，那么Promise.resolve将不做任何批改、一成不变地返回这个实例。

    • const promise = new Promise((resolve, reject) => {
  resolve("start");
});
​
const resolvePromise = Promise.resolve(promise);
resolvePromise.then((res) => console.log(res));

  • 如果参数是 具备then办法的对象Promise.resolve()办法会将这个对象转为 Promise 对象，而后就立刻执行thenable对象的then()办法

    • let thenable = {
  then: function(resolve, reject) {
    resolve('promise');
  }
};
​
let p1 = Promise.resolve(thenable);
p1.then(function (res) {
  console.log(res);  // promise

  • 如果参数是一个原始值，或者是一个不具备then()办法的对象，则Promise.resolve()办法返回一个新的 Promise 对象，状态为resolved

    • const p1 = Promise.resolve('promise');
​
p1.then(function (res) {
  console.log(res)
});

  • Promise.resolve()办法容许调用时不带参数，间接返回一个resolved状态的 Promise 对象

    • const p = Promise.resolve();
​
p.then(function () {
  // ...

参考资料：[ECMAScript 入门](https://es6.ruanyifeng.com/#d…

来CustomPromise增加动态resolve办法

//动态的resolve办法
  static resolve(value) {
    if (value instanceof CustomPromise) return value;
    return new CustomPromise((resolve) => resolve(value));
  }

Promise.reject()

Promise.reject(reason) 返回一个Promise实例，并且携带reason

const promise = Promise.reject("rejected message")
// 相当于
// const promise2 = new Promsie((resolve, reject) => {
//   reject("rejected message")
// })

根据上述例子咱们来剖析下后果

  • 能够看出无论reason传入什么内容，都是通过reject()办法，那是不是能够了解为就是捕捉错误信息

来CustomPromise增加动态reject办法

//动态的reject办法
static reject(reason) {
   return new CustomPromise((resolve, reject) => reject(reason));
}

Promise.prototype.finally()

finally()不接管参数，并且在.then或.catch回调函数执行完当前，再执行finally中的办法

看下原生promise成果

const promise = new Promise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
      resolve("hellow");
    });
  })
  .then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
      resolve("promise");
    });
  })
  .finally(() => {
    console.log("finally");
    return "is finally";
  })
  .then((res) => console.log(res));
​

输入后果

start
hellow
finally
promise

根据上述原生finally咱们来剖析下后果

  • finally办法和then以及catch一样，都能够返回一个新的Promise
  • finally并不会影响之前返回的Promise对象
  • 能够持续链式调用并且获取之前Promise的值

来CustomPromise增加动态finally办法

finally(callback) {
    return this.then(
      (value) => CustomPromise.resolve(callback()).then(() => value),
      (reason) => CustomPromise.resolve(callback()).then(() => reason)
    );
}

那咱们来验证下

const promise = new CustomPromise((resolve, reject) => {
  resolve("start");
});
promise
  .then((res) => {
    console.log(res);
    return new CustomPromise((resolve, reject) => {
      resolve("hellow");
    });
  })
  .then((res) => {
    console.log(res);
    return new CustomPromise((resolve, reject) => {
      resolve("promise");
    });
  })
  .finally(() => {
    console.log("finally");
    return "is finally";
  })
  .then((res) => console.log(res));
​
// 输入后果
start
hellow
finally
promise

Promise.all()

Promise.all() 办法接管一个 promise 的 iterable 类型(Array，Map，Set 都属于 ES6 的 iterable 类型)并返回一个新的Promise实例

看下原生Promise.all()成果

let p1 = new Promise((resolve, reject) => {
  resolve("start");
}).then((res) => res);
let p2 = new Promise((resolve, reject) => {
  resolve("hellow");
}).then((res) => res);
let p3 = new Promise((resolve, reject) => {
  resolve("promise");
}).then((res) => res);
​
Promise.all([p1, p2, p3])
  .then((res) => console.log("success:", res))
  .catch((err) => console.log("error:", err));
// 输入后果 success:['start', 'hellow', 'promise']
let p1 = new Promise((resolve, reject) => {
  resolve("start");
}).then((res) => res);
let p2 = new Promise((resolve, reject) => {
  reject("报错了");
}).then((res) => res);
let p3 = new Promise((resolve, reject) => {
  reject("报错了2");
}).then((res) => res);
​
Promise.all([p1, p2, p3])
  .then((res) => console.log("success:", res))
  .catch((err) => console.log("error:", err));
//输入后果 error:报错了

那咱们来依据输入后果剖析下

  • 胜利的时候返回的是一个后果数组
  • 失败的时候则返回最先被reject失败状态的值

来CustomPromise增加动态all()办法

  //动态的all办法
  static all(values){
    let result = [];
    let index = 0;
    return new CustomPromise((resolve,reject) => {
      function addPromise(key, value) {
        result[key] = value
        index++
        if (index === values.length) {
          resolve(result)
        }
      }
      
      for(let i = 0; i < values.length; i++){
        let item = values[i];
        if(item instanceof CustomPromise){
          // 参数为Promise
          item.then(value => addPromise(i,value), error => reject(reason))
        }else{
          // 参数为一般值
          addPromise(i,item)
        }
      }
    })
  }

那咱们来验证下

let p1 = new CustomPromise((resolve, reject) => {
  resolve("start");
});
let p2 = new CustomPromise((resolve, reject) => {
  resolve("hellow");
});
let p3 = new CustomPromise((resolve, reject) => {
  resolve("promise");
});
​
CustomPromise.all([p1, p2, p3])
  .then((res) => console.log("success:", res))
  .catch((err) => console.log("error:", err));
// 输入后果 success:['start', 'hellow', 'promise']
let p1 = new CustomPromise((resolve, reject) => {
  resolve("start");
}).then((res) => res);
let p2 = new CustomPromise((resolve, reject) => {
  reject("报错了");
}).then((res) => res);
let p3 = new CustomPromise((resolve, reject) => {
  reject("报错了2");
}).then((res) => res);
​
CustomPromise.all([p1, p2, p3])
  .then((res) => console.log("success:", res))
  .catch((err) => console.log("error:", err));
//输入后果 error:报错了

Promise.race()

Promise.race()办法返回一个 promise，一旦迭代器中的某个 promise 解决或回绝，返回的 promise 就会解决或回绝。

var p1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 300, "start");
});
var p2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, "hellow");
});
​
const p = Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "hellow"
});

来剖析下那就是有一个实例先扭转状态，p的状态就跟着扭转

来CustomPromise增加动态race()办法

//动态race办法
  static race(values) {
    return new CustomPromise((resolve, reject) => {
      for (const p of values) {
        p.then(resolve, reject);
      }
    });
  }

那咱们来验证下

var p1 = new CustomPromise(function(resolve, reject) {
    setTimeout(resolve, 300, "start");
});
var p2 = new CustomPromise(function(resolve, reject) {
    setTimeout(resolve, 100, "hellow");
});
​
const p = CustomPromise.race([p1, p2]).then(function(value) {
  console.log(value); // "hellow"
});

Promise.allSettled()

Promise.allSettled() 办法不依赖于彼此胜利实现的异步工作，不论每一个操作是胜利还是失败，再进行下一步操作。

Promise.allSettled([
  Promise.resolve('start'),
  Promise.reject(new Error("error")),
  new Promise((resolve) => setTimeout(() => resolve('hellow'), 0)),
  'promise',
]).then((values) => console.log(values));
​
// [
//   { status: 'fulfilled', value: start },
//   { status: 'rejected', reason: Error: error },
//   { status: 'fulfilled', value: hellow },
//   { status: 'fulfilled', value: promise }
// ]

来剖析下后果

  • status一个字符串，要么是 "fulfilled"，要么是 "rejected"，示意 promise 的最终状态。
  • value当 status 为 "fulfilled"，在 promise 解决时才有 value
  • reason当 status 为 "rejected"，在 promsie 回绝时才有 reason

来CustomPromise增加动态allSettled()办法

//动态allSettled办法
  static allSettled(values) {
    return new Promise((resolve, reject) => {
      let resolveDataList = [],
        resolveCount = 0;
      const addPromise = (status, value, i) => {
        resolveDataList[i] = {
          status,
          value,
        };
        resolveCount++;
        if (resolveCount === values.length) {
          resolve(resolveDataList);
        }
      };
      values.forEach((value, i) => {
        if (value instanceof CustomPromise) {
          value.then(
            (res) => {
              addPromise("fulfilled", res, i);
            },
            (err) => {
              addPromise("rejected", err, i);
            }
          );
        } else {
          addPromise("fulfilled", value, i);
        }
      });
    });
  }

来验证下

CustomPromise.allSettled([
  CustomPromise.resolve('start'),
  CustomPromise.reject(new Error("error")),
  new CustomPromise((resolve) => setTimeout(() => resolve('hellow'), 0)),
  'promise',
]).then((values) => console.log(values));
​
// [
//   { status: 'fulfilled', value: start },
//   { status: 'rejected', reason: Error: error },
//   { status: 'fulfilled', value: hellow },
//   { status: 'fulfilled', value: promise }
// ]

Promise.any()

Promise.any()接管一个由Promise所组成的可迭代对象，返回一个新的promise

const p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "start");
});
​
const p2 = new Promise((resolve, reject) => {
  reject("报错了");
});
​
const p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "promise");
});
​
Promise.any([p1, p2, p3]).then((value) => {
  console.log(value);
  // start
})
const p1 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, "start");
});
​
const p2 = new Promise((resolve, reject) => {
  reject("报错了");
});
​
const p3 = new Promise((resolve, reject) => {
  setTimeout(reject, 500, "promise");
});
​
Promise.any([p1, p2, p3])
  .then((value) => {
    console.log("value:", value);
  })
  .catch((err) => {
    console.log("err:", err); //err: AggregateError: All promises were rejected
  });
​

那咱们来剖析下

  • 与all()不同，只有有一个 promise 胜利，会返回首个胜利的 promise 的值，办法提前结束
  • 如果所有Promise都失败，则报错All promises were

来CustomPromise增加动态any()办法

//动态any办法
  static any(values) {
    return new CustomPromise((resolve, reject) => {
      let rejectCount = 0;
      values.forEach((value) => {
        value.then(
          (val) => resolve(val),
          (err) => {
            rejectCount++;
            if (rejectCount === value.length) {
              reject("All promises were rejected");
            }
          }
        );
      });
    });
  }

咱们来验证下

const p1 = new CustomPromise((resolve, reject) => {
  setTimeout(resolve, 100, "start");
});
​
const p2 = new CustomPromise((resolve, reject) => {
  reject("报错了");
});
​
const p3 = new CustomPromise((resolve, reject) => {
  setTimeout(resolve, 500, "promise");
});
​
CustomPromise.any([p1, p2, p3])
  .then((value) => {
    console.log("value:", value); //value: start
  })
  .catch((err) => {
    console.log("err:", err);
  });
const p1 = new CustomPromise((resolve, reject) => {
  setTimeout(reject, 100, "start");
});
​
const p2 = new CustomPromise((resolve, reject) => {
  reject("报错了");
});
​
const p3 = new CustomPromise((resolve, reject) => {
  setTimeout(reject, 500, "promise");
});
​
CustomPromise.any([p1, p2, p3])
  .then((value) => {
    console.log("value:", value);
  })
  .catch((err) => {
    console.log("err:", err); //err: All promises were rejected
  });

残缺代码

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
​
class CustomPromise {
  constructor(executor) {
    try {
      executor(this.resolve, this.reject);
    } catch (error) {
      // 如果有谬误，就间接执行 reject
      this.reject(error);
    }
  }
  // resolve和reject为什么要用箭头函数？
  // 如果间接调用的话，一般函数this指向的是window或者undefined
  // 用箭头函数就能够让this指向以后实例对象
  resolve = (value) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = FULFILLED;
      this.value = value;
​
      // resolve外面将所有胜利的回调拿进去执行
      if (this.onResolvedCallbacks.length) {
        this.onResolvedCallbacks.forEach((fn) => fn());
      }
    }
  };
  reject = (err) => {
    // promise只能从pending到rejected, 或者从pending到fulfilled
    if (this.status == PENDING) {
      this.status = REJECTED;
      this.reason = err;
      // reject外面将所有失败的回调拿进去执行
      if (this.onFulfilledCallbacks.length) {
        this.onFulfilledCallbacks.forEach((fn) => fn());
      }
    }
  };
  // 存储胜利回调函数
  onResolvedCallbacks = [];
  // 存储失败回调函数
  onFulfilledCallbacks = [];
​
  status = PENDING;
  // 胜利之后的值
  value = undefined;
  // 失败之后的值
  reason = undefined;
​
  then(onFulfilled, onRejected) {
    // 如果不传，就应用默认函数,确保是函数类型
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : (value) => value;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (reason) => {
            throw reason;
          };
​
    const thenCustomPromise = new CustomPromise((resolve, reject) => {
      const resolveCustomPromise = (callBack, value) => {
        try {
          const x = callBack(value);
          // 如果相等了，阐明return的是本人，抛出类型谬误并返回
          if (resolveCustomPromise === x) {
            return reject(new TypeError("类型谬误"));
          }
          // 判断x是不是 CustomPromise 实例对象
          if (x instanceof CustomPromise) {
            // 执行 x，调用 then 办法，目标是将其状态变为 fulfilled 或者 rejected
            // x.then(value => resolve(value), error => reject(reason))
            // 简化之后
            x.then(resolve, reject);
          } else {
            // 一般值
            resolve(x);
          }
        } catch (error) {
          reject(error);
        }
      };
      // 须要判断状态，依据状态抉择解决回调函数
      if (this.status == FULFILLED) {
        resolveCustomPromise(onFulfilled, this.value);
      } else if (this.status == REJECTED) {
        resolveCustomPromise(onRejected, this.reason);
      } else if (this.status == PENDING) {
        // 当状态为pending时,把then回调push进resolve/reject执行队列,期待执行
        this.onResolvedCallbacks.push(() =>
          resolveCustomPromise(onFulfilled, this.value)
        );
        this.onFulfilledCallbacks.push(() =>
          resolveCustomPromise(onRejected, this.reason)
        );
      }
    });
    return thenCustomPromise;
  }
  catch(onFulfilled) {
    return this.then(null, onFulfilled);
  }
  finally(callback) {
    return this.then(
      (value) => CustomPromise.resolve(callback()).then(() => value),
      (reason) => CustomPromise.resolve(callback()).then(() => reason)
    );
  }
  //动态的resolve办法
  static resolve(value) {
    if (value instanceof CustomPromise) return value;
    return new CustomPromise((resolve) => resolve(value));
  }
  //动态的reject办法
  static reject(reason) {
    return new CustomPromise((resolve, reject) => reject(reason));
  }
  //动态的all办法
  static all(values) {
    // 用来记录Promise胜利的次数
    let resolveCount = 0,
      // 用来保留Promise胜利的后果
      resolveDataList = [];
    return new CustomPromise((resolve, reject) => {
      function addPromise(key, value) {
        resolveDataList[key] = value;
        resolveCount++;
        if (resolveCount === values.length) {
          resolve(resolveDataList);
        }
      }
​
      for (let i = 0; i < values.length; i++) {
        let item = values[i];
        if (item instanceof CustomPromise) {
          // 参数为Promise
          item.then(
            (value) => addPromise(i, value),
            (error) => reject(error)
          );
        } else {
          // 参数为一般值
          addPromise(i, item);
        }
      }
    });
  }
  //动态race办法
  static race(values) {
    return new CustomPromise((resolve, reject) => {
      for (const p of values) {
        p.then(resolve, reject);
      }
    });
  }
  //动态allSettled办法
  static allSettled(values) {
    return new Promise((resolve, reject) => {
      let resolveDataList = [],
        resolveCount = 0;
      const addPromise = (status, value, i) => {
        resolveDataList[i] = {
          status,
          value,
        };
        resolveCount++;
        if (resolveCount === values.length) {
          resolve(resolveDataList);
        }
      };
      values.forEach((value, i) => {
        if (value instanceof CustomPromise) {
          value.then(
            (res) => {
              addPromise("fulfilled", res, i);
            },
            (err) => {
              addPromise("rejected", err, i);
            }
          );
        } else {
          addPromise("fulfilled", value, i);
        }
      });
    });
  }
  //动态any办法
  static any(values) {
    return new CustomPromise((resolve, reject) => {
      let rejectCount = 0;
      values.forEach((value) => {
        value.then(
          (val) => resolve(val),
          (err) => {
            rejectCount++;
            if (rejectCount === value.length) {
              reject("All promises were rejected");
            }
          }
        );
      });
    });
  }
}

结语

对于Promise的实现就到这里了，心愿能跟大家一起提高⛽️⛽️⛽️

如果写的有问题，欢送大家指出问题，一起探讨，让我再打磨打磨

最初呢，心愿大家反对一下，长文不易，记得给点个赞👍👍👍

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章