JavaScript 深度剖析 - 手写 Promise 源码

已于 2022-06-06 08:52:28 修改
阅读量721 收藏 7
点赞数 2
分类专栏： JavaScript深度剖析 文章标签： javascript 前端
于 2022-05-17 23:56:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41071974/article/details/124807687
版权

文章目录

  • 要求node 版本 > 12
  • 推荐 14.17.3 LTS长期支持版

一、Promise 类核心逻辑实现

1.1 Promise 的基本使用

  • Promise 就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行
new Promise(() => {});

  • Promise 有三种状态

    • 成功 fulfilled
    • 失败 rejected
    • 等待 pending
    • 状态改变：pending -> fulfilled 或 pending -> rejected
    • 一旦状态确定就不可更改

  • resolve 和 reject 函数是用来更改状态的

    • resolve：fulfilled
    • reject：rejected
new Promise((resolve, reject) => {
  resolve("成功");
  reject("失败");
});

1.2 创建 Promise 原理代码

1.2.1 执行器

new Promise((resolve, reject) => {
  resolve("成功");
  reject("失败");
});

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    // 立即执行
    executor(this.resolve, this.reject);
  }
  // promise 状态
  status = PENDING;
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = () => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
  };
  reject = () => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
  };
}

1.2.2 then

  • then 方法内部做的事情就是判断状态
  • 如果状态是成功，调用成功回调函数。如果状态是失败，调用失败回调函数
  • then 方法是被定义在原型对象中的
  • then 成功回调有一个参数，表示成功之后的值。then 失败回调有一个参数，表示失败后的原因

测试用例：

const MyPromise = require("./myPromise.js");
let promise = new MyPromise((resolve, reject) => {
  resolve("成功");
  reject("失败");
});
promise.then(
  (value) => {},
  (reason) => {}
);

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
  	// 立即执行
    executor(this.resolve, this.reject);
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined; 		-- 【新增】
  // 失败后的原因
  reason = undefined;		-- 【新增】
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {	-- 【新增参数】
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;		-- 【新增】
  };
  reject = (reason) => {	-- 【新增参数】
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;	-- 【新增】
  };
  then(successCallback, failCallback) {  -- 【新增】
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      failCallback(this.reason);
    }
  }
}
module.exports = MyPromise;

二、在 Promise 类中加入异步逻辑

测试用例：

const MyPromise = require("./myPromise.js");
let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {	-- 【新增】
    resolve("成功");
  }, 2000);
  //   reject("失败");
});

// 此处 then 方法是立即执行，因为定时器的存在，无法判断状态
// 所以，先将这两个回调函数存贮起来
// 在resolve 或 reject 调用时，判断回调函数是否存在，如果存在，就执行
promise.then(
  (value) => {
    console.log(value);
  },
  (reason) => {
    console.log(reason);
  }
);

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = undefined;		-- 【新增】
  // 失败回调
  failCallback = undefined;			-- 【新增】
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    this.successCallback && this.successCallback(this.value);	-- 【新增】
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    this.failCallback && this.failCallback(this.reason);	 -- 【新增】
  };
  then(successCallback, failCallback) {
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      failCallback(this.reason);
    } else {		-- 【新增】
      // 等待
      // 将成功回调和失败回调存储起来
      this.successCallback = successCallback;
      this.failCallback = failCallback;
    }
  }
}
module.exports = MyPromise;

三、实现 then 方法多次调用添加多个处理函数

测试用例：

const MyPromise = require("./myPromise.js");
let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功");
  }, 2000);
  //   reject("失败");
});

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

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];		-- 【修改】
  // 失败回调
  failCallback = []; 		-- 【修改】
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    // this.successCallback && this.successCallback(this.value);  -- 【失效】
    while (this.successCallback.length) {		-- 【新增】
      this.successCallback.shift()(this.value);
    }
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    // this.failCallback && this.failCallback(this.reason);  -- 【失效】
    while (this.failCallback.length) { 		-- 【新增】
      this.failCallback.shift()(this.reason);
    }
  };
  then(successCallback, failCallback) {
    // 判断状态
    if (this.status === FULFILLED) {
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      failCallback(this.reason);
    } else {
      // 等待
      // 将成功回调和失败回调存储起来
      this.successCallback.push(successCallback);		-- 【修改】
      this.failCallback.push(failCallback);		-- 【修改】
    }
  }
}

module.exports = MyPromise;

四、实现 then 方法的链式调用

测试用例：

const MyPromise = require("./myPromise.js");
let promise = new MyPromise((resolve, reject) => {
  resolve("成功");
  //   reject("失败");
});

function other() {
  return new MyPromise((resolve, reason) => {
    resolve("other");
  });
}
promise
  .then((value) => {
    console.log(value);
    return other();
  })
  .then((value) => {
    console.log(value);
  });
//成功
// other

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    // this.successCallback && this.successCallback(this.value);  -- 【失效】
    while (this.successCallback.length) {
      this.successCallback.shift()(this.value);
    }
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    // this.failCallback && this.failCallback(this.reason);  -- 【失效】
    while (this.failCallback.length) {
      this.failCallback.shift()(this.reason);
    }
  };
  then(successCallback, failCallback) { 	 -- 【调整】
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        let x = successCallback(this.value);
        // 判断 x 的值是普通值还是 promise 对象
        // 如果是普通值，直接调用 resolve
        // 如果是 promise 对象，查看 promise 对象返回的结果
        // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
        resolvePromise(x, resolve, reject);
      } else if (this.status === REJECTED) {
        failCallback(this.reason);
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(successCallback);
        this.failCallback.push(failCallback);
      }
    });
    return promise2;
  }
}
function resolvePromise(x, resolve, reject) { 	-- 【新增】
  if (x instanceof MyPromise) {
    // promise 对象
    // x.then(value => resolve(value),reason => reject(reason))
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}
module.exports = MyPromise;

五、then 方法链式调用识别 Promise 对象自返回

Promise 自己返回自己会报错，需要处理这种错误

测试用例：

const MyPromise = require("./myPromise.js");
let promise = new MyPromise((resolve, reject) => {
  resolve("成功");
  //   reject("失败");
});
let p1 = promise.then((value) => {
  console.log(value);
  return p1;
});
p1.then(
  (value) => {
    console.log(value);
  },
  (reason) => {
    console.log(reason);
    // TypeError: Chaining cycle detected for promise #<Promise>
  }
);

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    executor(this.resolve, this.reject);
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    // this.successCallback && this.successCallback(this.value);  -- 【失效】
    while (this.successCallback.length) {
      this.successCallback.shift()(this.value);
    }
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    // this.failCallback && this.failCallback(this.reason);  -- 【失效】
    while (this.failCallback.length) {
      this.failCallback.shift()(this.reason);
    }
  };
  then(successCallback, failCallback) {
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 因为 promise2 是在new MyPromise 的执行器中，
        // 所以必须将其变成异步代码，才能将 promise2 获取到
        setTimeout(() => {						-- 【调整】
          let x = successCallback(this.value);
          // 判断 x 的值是普通值还是 promise 对象
          // 如果是普通值，直接调用 resolve
          // 如果是 promise 对象，查看 promise 对象返回的结果
          // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
          resolvePromise(promise2, x, resolve, reject);
        }, 0);
      } else if (this.status === REJECTED) {
        failCallback(this.reason);
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(successCallback);
        this.failCallback.push(failCallback);
      }
    });
    return promise2;
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (x instanceof MyPromise) {
    if (promise2 === x) {		-- 【新增】
      return reject(
        new TypeError("Chaining cycle detected for promise #<Promise>")
      );
    }
    // promise 对象
    // x.then(value => resolve(value),reason => reject(reason))
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}
module.exports = MyPromise;

六、捕获错误及 then 链式调用其他状态代码补充

6.1 捕获错误

测试用例：

const MyPromise = require("./myPromise.js");
let promise = new MyPromise((resolve, reject) => {
  // throw new Error("executor error");
  resolve("成功");
  //   reject("失败");
});
promise
  .then(
    (value) => {
      console.log(value);
      throw new Error("then error");
    },
    (reason) => {
      console.log(reason.message); // executor error(第一个执行器错误)
    }
  )
  .then(
    (value) => {
      console.log(value);
    },
    (reason) => {
      // 上一个 then 的回调函数的错误需要在这个 then 中查看
      console.log(reason.message); 
    }
  );

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    try {									-- 【捕获执行器错误】
      executor(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    // this.successCallback && this.successCallback(this.value);  -- 【失效】
    while (this.successCallback.length) {
      this.successCallback.shift()(this.value);
    }
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    // this.failCallback && this.failCallback(this.reason);  -- 【失效】
    while (this.failCallback.length) {
      this.failCallback.shift()(this.reason);
    }
  };
  then(successCallback, failCallback) {
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 因为 promise2 是在new MyPromise 的执行器中
        //所以必须将其变成异步代码，才能将 promise2 获取到
        setTimeout(() => {
          try {									-- 【捕获then回调函数错误】
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        failCallback(this.reason);
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(successCallback);
        this.failCallback.push(failCallback);
      }
    });
    return promise2;
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (x instanceof MyPromise) {
    if (promise2 === x) {
      return reject(
        new TypeError("Chaining cycle detected for promise #<Promise>")
      );
    }
    // promise 对象
    // x.then(value => resolve(value),reason => reject(reason))
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}
module.exports = MyPromise;

6.2 then 链式调用其他状态代码补充

测试用例：

const MyPromise = require("./myPromise.js");
let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功");
  }, 2000);
  // reject("失败");
});
promise
  .then(
    (value) => {
      console.log(value); // "成功"
      return "aaa";
    },
    (reason) => {
      console.log(reason);
    }
  )
  .then((value) => {
    console.log(value); // "aaa"
  });

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    try {
      executor(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    // this.successCallback && this.successCallback(this.value);  -- 【失效】
    while (this.successCallback.length) {
      this.successCallback.shift()();		-- 【取消shift参数】
    }
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    // this.failCallback && this.failCallback(this.reason);  -- 【失效】
    while (this.failCallback.length) {
      this.failCallback.shift()();		-- 【取消shift参数】
    }
  };
  then(successCallback, failCallback) {
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 因为 promise2 是在new MyPromise 的执行器中
        //所以必须将其变成异步代码，才能将 promise2 获取到
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => { 		-- 【修改】
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.failCallback.push(() => {		-- 【修改】
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    return promise2;
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (x instanceof MyPromise) {
    if (promise2 === x) {
      return reject(
        new TypeError("Chaining cycle detected for promise #<Promise>")
      );
    }
    // promise 对象
    // x.then(value => resolve(value),reason => reject(reason))
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}
module.exports = MyPromise;

七、将 then 方法的参数变成可选参数

测试用例：

const MyPromise = require("./myPromise.js");
let promise = new MyPromise((resolve, reject) => {
  // resolve("成功");
  reject("失败");
});
promise
  .then()
  .then()
  .then(
    (value) => {
      console.log(value);
    },
    (reason) => console.log(reason) // 失败
  );

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    try {
      executor(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    // this.successCallback && this.successCallback(this.value);  -- 【失效】
    while (this.successCallback.length) {
      this.successCallback.shift()();
    }
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    // this.failCallback && this.failCallback(this.reason);  -- 【失效】
    while (this.failCallback.length) {
      this.failCallback.shift()();
    }
  };
  then(successCallback, failCallback) {
    successCallback = successCallback ? successCallback : (value) => value;
    failCallback = failCallback 	  --【新增】
      ? failCallback
      : (reason) => {
          throw reason;
        };
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 因为 promise2 是在new MyPromise 的执行器中，
        // 所以必须将其变成异步代码，才能将 promise2 获取到
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    return promise2;
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (x instanceof MyPromise) {
    if (promise2 === x) {
      return reject(
        new TypeError("Chaining cycle detected for promise #<Promise>")
      );
    }
    // promise 对象
    // x.then(value => resolve(value),reason => reject(reason))
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}
module.exports = MyPromise;

八、Promise.all 方法的实现

测试用例：

const MyPromise = require("./myPromise.js");

function p1() {
  return new MyPromise(function (resolve, reject) {
    setTimeout(() => {
      resolve("p1");
    }, 2000);
  });
}
function p2() {
  return new MyPromise(function (resolve, reject) {
    resolve("p1");
  });
}

MyPromise.all(["a", "b", p1(), p2(), "c"]).then(
  (result) => console.log(result)
  // [ 'a', 'b', 'p1', 'p1', 'c' ]
);

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    try {
      executor(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    // this.successCallback && this.successCallback(this.value);  -- 【失效】
    while (this.successCallback.length) {
      this.successCallback.shift()();
    }
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    // this.failCallback && this.failCallback(this.reason);  -- 【失效】
    while (this.failCallback.length) {
      this.failCallback.shift()();
    }
  };
  then(successCallback, failCallback) {
    // 当then没有回调函数时，为了传递状态，需要我们手动添加一个回调
    successCallback = successCallback ? successCallback : (value) => value;
    failCallback = failCallback
      ? failCallback
      : (reason) => {
          throw reason;
        };
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 因为 promise2 是在new MyPromise 的执行器中，
        // 所以必须将其变成异步代码，才能将 promise2 获取到
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    return promise2;
  }
  static all(array) { 		--【新增】
    let result = [];
    let index = 0; // 防止出现异步空值
    return new MyPromise((resolve, reject) => {
      function addData(key, value) {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result);
        }
      }
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(
            (value) => addData(i, value),
            (reason) => reject(reason)
          );
        } else {
          // 普通值
          addData(i, array[i]);
        }
      }
    });
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (x instanceof MyPromise) {
    if (promise2 === x) {
      return reject(
        new TypeError("Chaining cycle detected for promise #<Promise>")
      );
    }
    // promise 对象
    // x.then(value => resolve(value),reason => reject(reason))
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}
module.exports = MyPromise;

九、Promise.resolve 方法的实现

测试用例：

const MyPromise = require("./myPromise.js");

function p1() {
  return new MyPromise(function (resolve, reject) {
    setTimeout(() => {
      resolve("p1");
    }, 2000);
  });
}
MyPromise.resolve(100).then((value) => console.log(value)); // 100
MyPromise.resolve(p1()).then((value) => console.log(value)); // "p1"

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    try {
      executor(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    // this.successCallback && this.successCallback(this.value);  -- 【失效】
    while (this.successCallback.length) {
      this.successCallback.shift()();
    }
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    // this.failCallback && this.failCallback(this.reason);  -- 【失效】
    while (this.failCallback.length) {
      this.failCallback.shift()();
    }
  };
  then(successCallback, failCallback) {
    // 当then没有回调函数时，为了传递状态，需要我们手动添加一个回调
    successCallback = successCallback ? successCallback : (value) => value;
    failCallback = failCallback
      ? failCallback
      : (reason) => {
          throw reason;
        };
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 因为 promise2 是在new MyPromise 的执行器中，
        // 所以必须将其变成异步代码，才能将 promise2 获取到
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    return promise2;
  }
  static all(array) {
    let result = [];
    let index = 0; // 防止出现异步空值
    return new MyPromise((resolve, reject) => {
      function addData(key, value) {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result);
        }
      }
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(
            (value) => addData(i, value),
            (reason) => reject(reason)
          );
        } else {
          // 普通值
          addData(i, array[i]);
        }
      }
    });
  }
  static resolve(value) {		-- 【新增】
    if (value instanceof MyPromise) return value;
    return new MyPromise((resolve) => resolve(value));
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (x instanceof MyPromise) {
    if (promise2 === x) {
      return reject(
        new TypeError("Chaining cycle detected for promise #<Promise>")
      );
    }
    // promise 对象
    // x.then(value => resolve(value),reason => reject(reason))
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}
module.exports = MyPromise;

十、Promise.finally 方法的实现

  • 不管 promise 最后的状态，在执行完 then 或 catch 指定的回调函数以后，都会执行 finally 方法指定的回调函数
  • 在 finally 方法后面，可以链式调用 then 方法拿到当前 promise 最终返回的结果
  • 定义在 promise 原型对象上

测试用例：

const MyPromise = require("./myPromise.js");

function p1() {
  return new MyPromise(function (resolve, reject) {
    setTimeout(() => {
      resolve("p1");
    }, 2000);
  });
}
function p2() {
  return new MyPromise(function (resolve, reject) {
    resolve("p2");
  });
}

p2()
  .finally(() => {
    console.log("finally");
    return p1();
  })
  .then(
    (value) => {
      console.log(value); // "p2"
    },
    (reason) => {
      console.log(reason);
    }
  );

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    try {
      executor(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    // this.successCallback && this.successCallback(this.value);  -- 【失效】
    while (this.successCallback.length) {
      this.successCallback.shift()();
    }
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    // this.failCallback && this.failCallback(this.reason);  -- 【失效】
    while (this.failCallback.length) {
      this.failCallback.shift()();
    }
  };
  then(successCallback, failCallback) {
    // 当then没有回调函数时，为了传递状态，需要我们手动添加一个回调
    successCallback = successCallback ? successCallback : (value) => value;
    failCallback = failCallback
      ? failCallback
      : (reason) => {
          throw reason;
        };
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 因为 promise2 是在new MyPromise 的执行器中，
        // 所以必须将其变成异步代码，才能将 promise2 获取到
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    return promise2;
  }
  finally(callback) {		-- 【新增】
    return this.then(
      (value) => {
        return MyPromise.resolve(callback()).then(() => value);
      },
      (reason) => {
        return MyPromise.resolve(callback()).then(() => {
          throw reason;
        });
      }
    );
  }
  static all(array) {
    let result = [];
    let index = 0; // 防止出现异步空值
    return new MyPromise((resolve, reject) => {
      function addData(key, value) {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result);
        }
      }
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(
            (value) => addData(i, value),
            (reason) => reject(reason)
          );
        } else {
          // 普通值
          addData(i, array[i]);
        }
      }
    });
  }
  static resolve(value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise((resolve) => resolve(value));
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (x instanceof MyPromise) {
    if (promise2 === x) {
      return reject(
        new TypeError("Chaining cycle detected for promise #<Promise>")
      );
    }
    // promise 对象
    // x.then(value => resolve(value),reason => reject(reason))
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}
module.exports = MyPromise;

十一、catch 方法的实现

测试用例：

const MyPromise = require("./myPromise.js");

function p2() {
  return new MyPromise(function (resolve, reject) {
    reject("失败");
  });
}

p2()
  .then((value) => console.log(value))
  .catch((reason) => console.log(reason));

原理代码：

const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败
class MyPromise {
  constructor(executor) {
    try {
      executor(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }
  // promise 状态
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  successCallback = [];
  // 失败回调
  failCallback = [];
  // 此处使用箭头函数，是为了让这个函数内部的 this 指向类的对象
  resolve = (value) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // 判断成功回调是否存在，如果存在则调用
    // this.successCallback && this.successCallback(this.value);  -- 【失效】
    while (this.successCallback.length) {
      this.successCallback.shift()();
    }
  };
  reject = (reason) => {
    // 如果状态不是等待，阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败原因
    this.reason = reason;
    // 判断失败回调是否存在，如果存在则调用
    // this.failCallback && this.failCallback(this.reason);  -- 【失效】
    while (this.failCallback.length) {
      this.failCallback.shift()();
    }
  };
  then(successCallback, failCallback) {
    // 当then没有回调函数时，为了传递状态，需要我们手动添加一个回调
    successCallback = successCallback ? successCallback : (value) => value;
    failCallback = failCallback
      ? failCallback
      : (reason) => {
          throw reason;
        };
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 因为 promise2 是在new MyPromise 的执行器中，
        // 所以必须将其变成异步代码，才能将 promise2 获取到
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            // 判断 x 的值是普通值还是 promise 对象
            // 如果是普通值，直接调用 resolve
            // 如果是 promise 对象，查看 promise 对象返回的结果
            // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else {
        // 等待
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);
              // 判断 x 的值是普通值还是 promise 对象
              // 如果是普通值，直接调用 resolve
              // 如果是 promise 对象，查看 promise 对象返回的结果
              // 再根据 promise 对象返回的结果，决定调用 resolve 还是 reject
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    return promise2;
  }
  finally(callback) {
    return this.then(
      (value) => {
        return MyPromise.resolve(callback()).then(() => value);
      },
      (reason) => {
        return MyPromise.resolve(callback()).then(() => {
          throw reason;
        });
      }
    );
  }
  catch(failCallback) { 		-- 【新增】
    return this.then(undefined, failCallback);
  }
  static all(array) {
    let result = [];
    let index = 0; // 防止出现异步空值
    return new MyPromise((resolve, reject) => {
      function addData(key, value) {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result);
        }
      }
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(
            (value) => addData(i, value),
            (reason) => reject(reason)
          );
        } else {
          // 普通值
          addData(i, array[i]);
        }
      }
    });
  }
  static resolve(value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise((resolve) => resolve(value));
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (x instanceof MyPromise) {
    if (promise2 === x) {
      return reject(
        new TypeError("Chaining cycle detected for promise #<Promise>")
      );
    }
    // promise 对象
    // x.then(value => resolve(value),reason => reject(reason))
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
}
module.exports = MyPromise;
每天内卷一点点
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
V8引擎Promise源码全面解读（深度好文）
前端下午茶
08-02 1230
作者：月夕原文：https://juejin.cn/post/7055202073511460895写在前面的话阅读本文你将收获什么？了解 V8 Promise 源码全过程，世界上不再有能困住你的 Promise 题目，我就是这么肯定这篇文章的干货仅仅了解或者实现了 Promise/A+ 规范，这与 JavaScript 的 Promise 中间还有很大的差距如果你在面试时将 Promise 回答...
js常见面试题——详解Promise使用与原理及实现过程（附源码）_promise原理
2401_84544780的博客
05-13 528
/ 为了处理可能的抛错,不得不将 try catch 套在代码外边，// async 函数会返回一个 promise。// 一旦嵌套变多，代码可读性就会急剧下降。
Promise源码实现
weixin_43213911的博客
09-05 848
【代码】Promise源码实现。
原生JS实现promise（只包括状态改变的代码）
hahahahahahahaha__1的博客
10-17 997
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&amp
读源码（四）—— js Promise
amurocrash的专栏
07-04 182
写了一些示例还有仿源码自己实现一个简单的MyPromise，主要内容都在代码注释中： class PromiseTest { static test1() { const p = new Promise((resolve, reject) => { // resolve('result1') reject(new Error('error1')) }) p.then(result => { console.log(result)
JS手写Promise源码
12-19
为什么要手写Promise？1、深入理解Promise的工作原理：手写Promise可以帮助我们更深入地理解Promise的工作原理和内部机制。通过手动实现Promise的核心功能，如异步调用、状态管理和回调处理，我们可以更好地理解...
基于Javascript的mint-ui Vue组件库设计源码
05-26
本项目是基于Javascript的mint-ui Vue组件库设计源码，包含234个文件，其中包括80个JavaScript文件、69个Vue文件、38个Markdown文档、31个JSON文件、4个CSS文件、1个eslintignore文件、1个eslintrc文件、1个...
基于Javascript的行为验证码AJ-Captcha设计源码
04-11
本源码提供了一个基于Javascript的行为验证码AJ-Captcha设计。项目包含1645个文件，其中包括343个PNG图片、241个PHP文件、139个Swift文件、93个JavaScript文件、88个H文件、80个M文件、72个XML文件、69个Java文件、...
基于Vue和Javascript的layui-table扩展插件设计源码
最新发布
05-31
layui-table扩展插件项目源码，共321个文件，采用JavaScript、CSS、HTML和Vue等语言开发，涉及多种文件类型如JavaScript脚本、SCSS样式表、Markdown文档、JSON配置文件、CSS样式表、HTML文档、Vue组件、TTF字体文件...
javascript-promise-book
02-20
前端promise教程，javascript-promise-book的pdf版本文档
promise.js
07-29
源码实现需要熟悉Promise的使用，实现了Promise的then，catch，resolve，reject，all，race六种方法，测试的html自己编写一下就好了，记得引入promise文件 否则使用的就是js自带的promise
js异步编程三：手写promise源码分析
山有木兮的博客
08-30 253
一、promise类核心逻辑实现 Promise就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行器会立即执行。 Promise中有三种状态，分别为成功(fulfilled)失败(rejected)等待(pending) Pending->fulfilled Pending->rejected 一量状态确定就不可更改 resolve和reject函数是用来更改状态的 Resolve:fulfilled Reject:rejected then方法内部做的事情就判断状态，如果状态是成功
ES6 Promise.then的源码（跟着大大写的）
weixin_41436338的博客
04-03 1918
写源码可以了解一个函数的本质，通过对源码的理解可以让你对知识有更多的了解，欢迎大家留言交流学习。 function myPromise(fn){ if(typeof(fn) !== 'function'){ throw Error (`Promise resolver ${fn} is not a function`) ...
promise源码实现
celi_echo的博客
03-18 355
本篇文章主要在于探究 Promise 的实现原理，带领大家一步一步实现一个 Promise , 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。 接下来，带你一步一步实现一个 Promise 1. Promise 基本结构 new Promise((resolve, reject) =&gt; { setTimeout(() =&gt...
javascript Promise 底层实现
y_w_x_k的博客
09-17 157
class Promise{ constructor(executor){ this.PromiseState="pending" this.PromiseResult=null this.callbacks=[] let self=this //resolve function resolve(data){ //判断状态 if(self.Promis.
javascript Promise 一些底层实现
weixiaoderensheng的博客
11-04 1330
Promise.all  定义：当Promise 结果都为resolve 返回resolve的数组集，当一个为reject，将第一个遇到的reject返回。 const p1 = Promise.resolve('ok1') const p2 = Promise.reject('no2') const p3 = Promise.resolve('ok3') const p4 = Promis...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
当幸福来敲门的专栏
12-29 3703
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。 注意：本地绝对路径地址不能加载，跨域问题用代理或者服务端解决。 svg模式渲染存在缺陷，只能渲染普通pdf，带签名、印章的可能会渲染不全，报错，pdf.js官方目前没有给出解决方案 canvas模式本质是图片，默认进去的时候，图片在手机端被缩放，不是原分辨率，所以失真模糊。所以需要放大查看pdf pdfh5博客主页 pdfh5项目GitHub地址 react、vu
JavaScript-深度剖析（从入门到精通）.doc
12-01
JavaScript-深度剖析（从入门到精通）.doc是一部涵盖JavaScript语言概况、基本数据结构、程序构成、基于对象的JavaScript语言、创建新对象、使用内部对象系统、窗口及输入输出、WEB页面信息的交互、实现更复杂的交互...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天内卷一点点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值