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

前言

大家好，我是梁木由，是一个有想头的前端。这几天再回顾基础知识时，对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);  });

输入后果

starthellowpromise

那咱们来剖析实现一下

首先.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))

输入后果

starthellowpromise

根据上述原生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));// 输入后果starthellowpromise

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));

输入后果

starthellowfinallypromise

根据上述原生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));// 输入后果starthellowfinallypromise

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的实现就到这里了，心愿能跟大家一起提高⛽️⛽️⛽️

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

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