预备知识

• 回调函数：当一个函数作为参数传入另一个函数中，并且它不会立刻执行，当满足一定条件之后，才会执行，这种函数称为回调函数。比如：定时器。
• 异步任务：与之对应的概念是同步任务，同步任务是在主线程上排队执行，当前面的任务执行完成，才会执行下一个任务。异步任务不进入主线程，而是进入异步队列，前一个任务是否执行完成不影响下一个任务的指向。简单理解就是同步要按代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

为什么出现Promise

存在异步任务的代码，不能保证代码按照顺序执行，但在特定的需要下，就是需要在异步中实现顺序执行，这时常使用回调函数去实现，比如下面的代码：

setTimeout(()=>{
            console.log('找实习');
            setTimeout(()=>{
                console.log('面试通过');
                setTimeout(()=>{
                    console.log('拿offer');
                    setTimeout(()=>{
                        console.log('上班');
                    },2000)
                },1000)
            },1000)
        },2000)

执行结果：

虽然上面的代码能实现我们想要的结果，但一些情形下，需要嵌套更多回调函数时，多层嵌套让代码可读性非常差，后期的维护或者异常处理等都变得特别繁琐，让缩进格式也变得非常麻烦。

回调函数A中嵌套回调函数B，回调函数B中嵌套回调函数C.......这种回调函数多层嵌套的情况被称为回调地狱。回调地狱就是为了实现在异步任务中代码也能顺序执行而出现的一种操作。

为解决回调地狱带来的问题，ES6新增了Promise类，让我们能更优雅的书写复杂的异步任务。

Promise

先用一段代码认识一下Promise：

new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('3秒后执行')
            },3000)
}).then(res=>{console.log(res);})

• 是一个类，需要使用new Promise来创建实例对象。
• promise有三种状态：pending(待定)，fulfilled(已兑现)，rejected(已拒绝)。fulfilled和rejected也可以称为已敲定。promise初始状态是pending，promise的状态转换有两条路：一条pending->fulfilled，一条pending->rejected。状态一旦改变，就不能再发生变化。
• 调用resolve()方法，pending状态会变成fulfilled状态，并且触发then()中第一个回调方法；调用reject()方法，pending状态会变成rejected状态，并且触发then()中第二个回调方法。
• promise有三个实例方法，then、catch、finally。其中catch和finally实际都是在调用then方法，只是它们往then中传递的参数不一样。

  catch ： then（undefined，reject的回调方法）
  finally ： then（A回调,A回调）

• promise的三个实例方法和六个静态方法都是返回一个新的promise。六个静态方法为：resolve、reject、race、all、allSettled、any。其中race、all、allSettled、any将一个 Promise 可迭代对象作为输入（也可以简单理解成：传递数组作为参数）。

promise的实例方法

下面会对三个实例方法进行重写，对于相同的代码进行了提取：

      // 将方法放到任务队列中的方法
      function runAsynctask(callback) {
        if (typeof queueMicrotask === "function") {
          queueMicrotask(callback);
        } else if (typeof MutationObserver === "function") {
          // 创建观察器
          const obs = new MutationObserver(callback);
          // 创建元素，添加监听
          const divNode = document.createElement("div");
          // 参数1 观察的dom节点
          // 参数2 观察的选项（childList 观察子节点改变）
          obs.observe(divNode, { childList: true });
          // 修改元素内容
          divNode.innerText = "999999";
        } else {
          setTimeout(callback, 0);
        }
      }


      // 对then不同的返回值进行不同操作
      function judgmentFn(x, p, resolve, reject) {
        if (x === p) {
          throw new TypeError("Chaining cycle detected for promise #<Promise>");
        }
        if (x instanceof QPromise) {
          x.then(
            (res) => resolve(res),
            (err) => reject(err)
          );
        } else {
          resolve(x);
        }
      }

then方法

​then() 方法最多接受两个参数：用于 Promise 兑现和拒绝情况的回调函数。它返回一个 Promise 对象。

手写then方法：

    then(onFulfilled, onRejected) {
          // 参数判断
          onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (x) => x;
          onRejected = typeof onRejected === "function" ? onRejected : (x) => {throw x;};

          const p = new QPromise((resolve, reject) => {
            // 执行方法
            if (this.state === FULFILLED) {
              runAsynctask(() => {
                try {
                  const x = onFulfilled(this.result);
                  judgmentFn(x, p, resolve, reject);
                } catch (error) {
                  reject(error);
                }
              });
            } else if (this.state === REJECTED) {
              runAsynctask(() => {
                try {
                  const x = onRejected(this.result);
                  judgmentFn(x, p, resolve, reject);
                } catch (error) {
                  reject(error);
                }
              });
            } else if (this.state === PENDING) {
              // 保存回调函数
              this.#handlers.push({
                onFulfilled: () => {
                  runAsynctask(() => {
                    try {
                      const x = onFulfilled(this.result);
                      judgmentFn(x, p, resolve, reject);
                    } catch (error) {
                      reject(error);
                    }
                  });
                },
                onRejected: () => {
                  runAsynctask(() => {
                    try {
                      const x = onRejected(this.result);
                      judgmentFn(x, p, resolve, reject);
                    } catch (error) {
                      reject(error);
                    }
                  });
                },
              });
            }
          });

          return p;
    }

catch方法

catch() ：在 promise 被拒绝时调用catch（）里的函数；返回一个 Promise 对象。此方法是 Promise.prototype.then(undefined, onRejected) 的一种简写形式。

 catch(onRejected) {
          // 内部调用then方法
          return this.then(undefined, onRejected);
}

finally方法

finally() ：用于注册一个在 promise 敲定（兑现或拒绝）时调用的函数，无论是兑现还是拒绝，都是调用同一个函数。

 finally(onFinally) {
          return this.then(onFinally, onFinally);
 }

promise的静态方法

resolve方法

Promise.resolve() ：将给定的值转换为一个 Promise。如果这个值本身就是promise，则直接返回这个值（就算这个promise的状态是已拒绝的）；其它值就封装成promise，返回的 Promise 将会以该值兑现。

static resolve(value) {
          // 如果是promise 直接返回
          if (value instanceof QPromise) {
            return value;
          }
          // 其他值，就直接封装成promise返回
          return new QPromise((res) => {
            res(value);
          });
}

reject方法

reject()：返回一个已拒绝的 Promise 对象，拒绝原因 是给定的参数。

static reject(value) {
          // 不管是什么值（包括 Promise 对象），都重新封装成promise返回
          return new QPromise((undefined, reject) => {
            reject(value);
          });
}

race方法

race()：等待第一个敲定；返回一个 Promise，这个返回的 promise 会随着第一个 promise 的敲定而敲定。

static race(promises) {
          // 返回promise
          return new QPromise((resolve, reject) => {
            // 判断是否为数组
            if (!Array.isArray(promises)) {
              return reject(new TypeError("Argument is not iterable"));
            }
            // 等待第一个敲定(promise状态的敲定)
            promises.forEach((p) => {
              // 对数组中的每一项使用resolve，可以保证每一项都是promise，所以每一项都可以使用then
              QPromise.resolve(p).then(
                (res) => {
                  resolve(res);
                },
                (err) => {
                  reject(err);
                }
              );
            });
          });
}

allSettled方法

 allSettled()：等待全部敲定；当数组中的每一个都已敲定时，返回的 Promise 将被兑现，并带有描述每个 Promise 结果的对象数组。

   static allSettled(promises) {
          // 返回promise
          return new QPromise((resolve, reject) => {
            // 判断是否为数组
            if (!Array.isArray(promises)) {
              return reject(new TypeError("Argument is not iterable"));
            }
            // 空数组直接兑现
            promises.length === 0 && resolve(promises);

            // 等待全部敲定
            // 记录结果
            const results = [];
            // 记录兑现次数
            let count = 0;
            promises.forEach((p, index) => {
              // 对数组中的每一项使用resolve，可以保证每一项都是promise，所以每一项都可以使用then
              QPromise.resolve(p).then(
                (res) => {
                  // 用索引来添加元素，保证结果顺序和promise数组的顺序一致
                  results[index] = { status: FULFILLED, value: res };
                  // 判断全部兑现
                  count++;
                  // 通过兑现的次数进行判断，保证获取到所有的结果
                  count === promises.length && resolve(results);
                },
                (err) => {
                  results[index] = { status: REJECTED, reason: err };
                  count++;
                  count === promises.length && resolve(results);
                }
              );
            });
          });
        }

all方法

all()：两种情况：

• 当所有输入的 Promise 都被兑现时，返回的 Promise 也将被兑现（即使传入的是空数组），并返回一个包含所有兑现值的数组。
• 如果输入的任何 Promise 被拒绝，则返回的 Promise 将被拒绝，并带有第一个被拒绝的原因。

    static all(promises) {
          // 返回promise
          return new QPromise((resolve, reject) => {
            // 判断是否为数组
            if (!Array.isArray(promises)) {
              return reject(new TypeError("Argument is not iterable"));
            }
            // 空数组直接兑现
            promises.length === 0 && resolve(promises);

            // 处理全部兑现
            // 记录结果
            const results = [];
            // 记录兑现次数
            let count = 0;
            promises.forEach((p, index) => {
              // 对数组中的每一项使用resolve，可以保证每一项都是promise，所以每一项都可以使用then
              QPromise.resolve(p).then(
                (res) => {
                  // 用索引来添加元素，保证结果顺序和promise数组的顺序一致
                  results[index] = res;
                  // 判断全部兑现
                  count++;
                  // 通过兑现的次数进行判断，保证获取到所有的结果
                  count === promises.length && resolve(results);
                },
                (err) => {
                  // 处理第一个拒绝
                  reject(err);
                }
              );
            });
          });
        }

any方法

any()：两种情况：

• 当输入的任何一个 Promise 兑现时，这个返回的 Promise 将会兑现，并返回第一个兑现的值。
• 当所有输入 Promise 都被拒绝（包括空数组）时，它会以一个包含拒绝原因数组的AggregateError 拒绝。

  static any(promises) {
          // 返回promise
          return new QPromise((resolve, reject) => {
            // 判断是否为数组
            if (!Array.isArray(promises)) {
              return reject(new TypeError("Argument is not iterable"));
            }
            // 空数组直接兑现
            promises.length === 0 && reject(new AggregateError(promises,'All promises were rejected'))
            // 等待结果
            const errors=[]
            let count=0
            promises.forEach((p,index)=>{
              QPromise.resolve(p).then(res=>{
                // 第一个兑现
                resolve(res)
              },err=>{
                // 全部拒绝
                errors[index]=err
                count++
                count===promises.length && reject(new AggregateError(errors,'All promises were rejected'))
              })
            })
          });
        }

手写Promise

手写promise的完整代码

// 三个状态
      const PENDING = "pending";
      const FULFILLED = "fulfilled";
      const REJECTED = "rejected";

     
      // 定义QPromise类
      class QPromise {
        // 初始状态
        state = PENDING;
        // 初始原因
        result = undefined;

        // 定义实例属性
        #handlers = [];

        // 构造函数
        constructor(fn) {
          const resolve = (result) => {
            // 状态不可逆
            if (this.state === PENDING) {
              // 修改状态
              this.state = FULFILLED;

              this.result = result;
              // 调用成功回调
              this.#handlers.forEach(({ onFulfilled }) => {
                onFulfilled(this.result);
              });
            }
          };
          const reject = (result) => {
            // 状态不可逆
            if (this.state === PENDING) {
              // 修改状态
              this.state = REJECTED;
              this.result = result;
              // 调用失败回调
              this.#handlers.forEach(({ onRejected }) => {
                onRejected(this.result);
              });
            }
          };

          try {
            // 执行
            fn(resolve, reject);
          } catch (error) {
            reject(error);
          }
        }

        // then :将方法放到微任务队列中
        then(onFulfilled, onRejected) {
          // 参数判断
          onFulfilled =
            typeof onFulfilled === "function" ? onFulfilled : (x) => x;
          onRejected =
            typeof onRejected === "function"
              ? onRejected
              : (x) => {
                  throw x;
                };

          const p = new QPromise((resolve, reject) => {
            // 执行方法
            if (this.state === FULFILLED) {
              runAsynctask(() => {
                try {
                  const x = onFulfilled(this.result);
                  judgmentFn(x, p, resolve, reject);
                } catch (error) {
                  reject(error);
                }
              });
            } else if (this.state === REJECTED) {
              runAsynctask(() => {
                try {
                  const x = onRejected(this.result);
                  judgmentFn(x, p, resolve, reject);
                } catch (error) {
                  reject(error);
                }
              });
            } else if (this.state === PENDING) {
              // 保存回调函数
              this.#handlers.push({
                onFulfilled: () => {
                  runAsynctask(() => {
                    try {
                      const x = onFulfilled(this.result);
                      judgmentFn(x, p, resolve, reject);
                    } catch (error) {
                      reject(error);
                    }
                  });
                },
                onRejected: () => {
                  runAsynctask(() => {
                    try {
                      const x = onRejected(this.result);
                      judgmentFn(x, p, resolve, reject);
                    } catch (error) {
                      reject(error);
                    }
                  });
                },
              });
            }
          });

          return p;
        }
        // 实例方法
        catch(onRejected) {
          // 内部调用then方法
          return this.then(undefined, onRejected);
        }
        // 实例方法
        finally(onFinally) {
          return this.then(onFinally, onFinally);
        }

        // 静态方法
        static resolve(value) {
          // 如果是promise 直接返回
          if (value instanceof QPromise) {
            return value;
          }
          // 其他值，就直接封装成promise返回
          return new QPromise((res) => {
            res(value);
          });
        }

        static reject(value) {
          // 不管是什么值（包括 Promise 对象），都重新封装成promise返回
          return new QPromise((undefined, reject) => {
            reject(value);
          });
        }

        // 等待第一个敲定
        static race(promises) {
          // 返回promise
          return new QPromise((resolve, reject) => {
            // 判断是否为数组
            if (!Array.isArray(promises)) {
              return reject(new TypeError("Argument is not iterable"));
            }
            // 等待第一个敲定(promise状态的敲定)
            promises.forEach((p) => {
              QPromise.resolve(p).then(
                (res) => {
                  resolve(res);
                },
                (err) => {
                  reject(err);
                }
              );
            });
          });
        }

        // 全部状态为成功，则返回一个数组
        // 若有一个失败，则处理失败
        static all(promises) {
          // 返回promise
          return new QPromise((resolve, reject) => {
            // 判断是否为数组
            if (!Array.isArray(promises)) {
              return reject(new TypeError("Argument is not iterable"));
            }
            // 空数组直接兑现
            promises.length === 0 && resolve(promises);

            // 处理全部兑现
            // 记录结果
            const results = [];
            // 记录兑现次数
            let count = 0;
            promises.forEach((p, index) => {
              QPromise.resolve(p).then(
                (res) => {
                  // 用索引来添加元素，保证结果顺序和promise数组的顺序一致
                  results[index] = res;
                  // 判断全部兑现
                  count++;
                  // 通过兑现的次数进行判断，保证获取到所有的结果
                  count === promises.length && resolve(results);
                },
                (err) => {
                  // 处理第一个拒绝
                  reject(err);
                }
              );
            });
          });
        }

        // 等待全部状态敲定，不管是失败还是成功状态，都放在一个数组中返回
        static allSettled(promises) {
          // 返回promise
          return new QPromise((resolve, reject) => {
            // 判断是否为数组
            if (!Array.isArray(promises)) {
              return reject(new TypeError("Argument is not iterable"));
            }
            // 空数组直接兑现
            promises.length === 0 && resolve(promises);

            // 等待全部敲定
            // 记录结果
            const results = [];
            // 记录兑现次数
            let count = 0;
            promises.forEach((p, index) => {
              QPromise.resolve(p).then(
                (res) => {
                  // 用索引来添加元素，保证结果顺序和promise数组的顺序一致
                  results[index] = { status: FULFILLED, value: res };
                  // 判断全部兑现
                  count++;
                  // 通过兑现的次数进行判断，保证获取到所有的结果
                  count === promises.length && resolve(results);
                },
                (err) => {
                  results[index] = { status: REJECTED, reason: err };
                  count++;
                  count === promises.length && resolve(results);
                }
              );
            });
          });
        }

        // 返回第一个状态兑现(成功)的结果
        // 全部拒绝时，返回拒绝的结果数组
        static any(promises) {
          // 返回promise
          return new QPromise((resolve, reject) => {
            // 判断是否为数组
            if (!Array.isArray(promises)) {
              return reject(new TypeError("Argument is not iterable"));
            }
            // 空数组直接兑现
            promises.length === 0 && reject(new AggregateError(promises,'All promises were rejected'))
            // 等待结果
            const errors=[]
            let count=0
            promises.forEach((p,index)=>{
              QPromise.resolve(p).then(res=>{
                // 第一个兑现
                resolve(res)
              },err=>{
                // 全部拒绝
                errors[index]=err
                count++
                count===promises.length && reject(new AggregateError(errors,'All promises were rejected'))
              })
            })
          
          
          
          
          });
        }
      }
        
        // 异步函数
      function runAsynctask(callback) {
        if (typeof queueMicrotask === "function") {
          queueMicrotask(callback);
        } else if (typeof MutationObserver === "function") {
          // 创建观察器
          const obs = new MutationObserver(callback);
          // 创建元素，添加监听
          const divNode = document.createElement("div");
          // 参数1 观察的dom节点
          // 参数2 观察的选项（childList 观察子节点改变）
          obs.observe(divNode, { childList: true });
          // 修改元素内容
          divNode.innerText = "999999";
        } else {
          setTimeout(callback, 0);
        }
      }


      // 对then不同的返回值进行不同操作
      function judgmentFn(x, p, resolve, reject) {
        if (x === p) {
          throw new TypeError("Chaining cycle detected for promise #<Promise>");
        }
        if (x instanceof QPromise) {
          x.then(
            (res) => resolve(res),
            (err) => reject(err)
          );
        } else {
          resolve(x);
        }
      }

如果本文对你有帮助，希望能得到你的点赞或收藏或关注，这是对我最好的鼓励；

如你有问题或疑惑，欢迎在评论区写下，必将努力解答；

如本文有误区，希望你不吝赐教，让我们共勉！