残缺高频题库仓库地址：https://github.com/hzfe/aweso...

残缺高频题库浏览地址：https://febook.hzfe.org/

这是一道有着成熟的业界标准的 coding 题，实现这道题的前置常识就是要理解什么是 Promises/A+。

这道题的难点就在于它是有标准的，任何一个不满足所有标准条件的解答都是谬误的。同时，成熟的标准也配套了成熟的测试用例，官网提供了 872 个测试用例针对标准中的所有条件一一进行检测，哪怕只有一条失败，那也是谬误的解答。

而这道题的答题要害也恰好是因为它是有标准的，只有咱们对于标准了然于胸，那么编写代码天然也是瓜熟蒂落。因为官网标准提供了一个合乎 Promises/A+ 标准的 Promise 应该具备的全副条件，并且在 Requirements 一节中构造清晰、逻辑充沛的表述了进去，咱们只需将标准中的文字转变为代码，就可能实现一个 Promises/A+ 标准的 Promise。

编写代码

因为标准条例较多，咱们拆解成三块来了解记忆，别离是：根底框架、then 办法和 Promise 处理程序。

每一块由两局部形成：

  • 流程图：展现了代码逻辑的关键步骤，也是优先须要了解记忆的点。
  • 实现代码：展现了代码逻辑的具体细节，是对关键步骤的欠缺补全。

其中，波及到标准条例的点会注明标准序号。

再次强调，本题的答题要害是相熟标准！磨刀不误砍柴工，务必先相熟！相熟！相熟！

1. 根底框架

1.1 流程图

1.2 实现代码

function Promise(executor) {  // 2.1. Promise 的状态  // Promise 必须处于以下三种状态之一：pending，fulfilled 或者 rejected。  this.state = "pending";  // 2.2.6.1. 如果 promise 处于 fulfilled 状态，所有相应的 onFulfilled 回调必须依照它们对应的 then 的原始调用程序来执行。  this.onFulfilledCallback = [];  // 2.2.6.2. 如果 promise 处于 rejected 状态，所有相应的 onRejected 回调必须依照它们对应的 then 的原始调用程序来执行。  this.onRejectedCallback = [];  const self = this;  function resolve(value) {    setTimeout(function () {      // 2.1.1. 当 Promise 处于 pending 状态时：      // 2.1.1.1. 能够转换到 fulfilled 或 rejected 状态。      // 2.1.2. 当 Promise 处于 fulfilled 状态时：      // 2.1.2.1. 不得过渡到任何其余状态。      // 2.1.2.2. 必须有一个不能扭转的值。      if (self.state === "pending") {        self.state = "fulfilled";        self.data = value;        // 2.2.6.1. 如果 promise 处于 fulfilled 状态，所有相应的 onFulfilled 回调必须依照它们对应的 then 的原始调用程序来执行。        for (let i = 0; i < self.onFulfilledCallback.length; i++) {          self.onFulfilledCallback[i](value);        }      }    });  }  function reject(reason) {    setTimeout(function () {      // 2.1.1. 当 Promise 处于 pending 状态时：      // 2.1.1.1. 能够转换到 fulfilled 或 rejected 状态。      // 2.1.3. 当 Promise 处于 rejected 状态时：      // 2.1.2.1. 不得过渡到任何其余状态。      // 2.1.2.2. 必须有一个不能扭转的值。      if (self.state === "pending") {        self.state = "rejected";        self.data = reason;        // 2.2.6.2. 如果 promise 处于 rejected 状态，所有相应的 onRejected 回调必须依照它们对应的 then 的原始调用程序来执行。        for (let i = 0; i < self.onRejectedCallback.length; i++) {          self.onRejectedCallback[i](reason);        }      }    });  }  // 补充阐明：用户传入的函数可能也会执行异样，所以这里用 try...catch 包裹  try {    executor(resolve, reject);  } catch (reason) {    reject(reason);  }}

2. then 办法

2.1 流程图

2.2 实现代码

// 2.2. then 办法// 一个 promise 必须提供一个 then 办法来拜访其以后值或最终值或 rejected 的起因。// 一个 promise 的 then 办法承受两个参数：// promise.then(onFulfilled, onRejected)Promise.prototype.then = function (onFulfilled, onRejected) {  const self = this;  let promise2;  // 2.2.7. then 必须返回一个 promise  return (promise2 = new Promise(function (resolve, reject) {    // 2.2.2. 如果 onFulfilled 是一个函数:    // 2.2.2.1. 它必须在 promise 的状态变为 fulfilled 后被调用，并将 promise 的值作为它的第一个参数。    // 2.2.2.2. 它肯定不能在 promise 的状态变为 fulfilled 前被调用。    // 2.2.2.3. 它最多只能被调用一次。    if (self.state === "fulfilled") {      // 2.2.4. onFulfilled 或 onRejected 在执行上下文堆栈仅蕴含平台代码之前不得调用。      // 3.1. 这能够通过“宏工作”机制（例如 setTimeout 或 setImmediate）或“微工作”机制（例如 MutationObserver 或 process.nextTick）来实现。      setTimeout(function () {        // 2.2.1. onFulfilled 和 onRejected 都是可选参数：        // 2.2.1.1. 如果 onFulfilled 不是一个函数，它必须被疏忽。        if (typeof onFulfilled === "function") {          try {            // 2.2.2.1. 它必须在 promise 的状态变为 fulfilled 后被调用，并将 promise 的值作为它的第一个参数。            // 2.2.5. onFulfilled 和 onRejected 必须作为函数调用。            const x = onFulfilled(self.data);            // 2.2.7.1. 如果 onFulfilled 或 onRejected 返回了一个值 x，则运行 Promise 处理程序 [[Resolve]](promise2, x)。            promiseResolutionProcedure(promise2, x, resolve, reject);          } catch (e) {            // 2.2.7.2. 如果 onFulfilled 或 onRejected 抛出了一个异样，promise2 必须用 e 作为 reason 来变为 rejected 状态。            reject(e);          }        } else {          // 2.2.7.3. 如果 onFulfilled 不是一个函数且 promise1 为 fulfilled 状态，promise2 必须用和 promise1 一样的值来变为 fulfilled 状态。          resolve(self.data);        }      });    }    // 2.2.3. 如果 onRejected 是一个函数，    // 2.2.3.1. 它必须在 promise 的状态变为 rejected 后被调用，并将 promise 的 reason 作为它的第一个参数。    // 2.2.3.2. 它肯定不能在 promise 的状态变为 rejected 前被调用。    // 2.2.3.3. 它最多只能被调用一次。    else if (self.state === "rejected") {      // 2.2.4. onFulfilled 或 onRejected 在执行上下文堆栈仅蕴含平台代码之前不得调用。      // 3.1. 这能够通过“宏工作”机制（例如 setTimeout 或 setImmediate）或“微工作”机制（例如 MutationObserver 或 process.nextTick）来实现。      setTimeout(function () {        // 2.2.1. onFulfilled 和 onRejected 都是可选参数：        // 2.2.1.2. 如果 onRejected 不是一个函数，它必须被疏忽。        if (typeof onRejected === "function") {          try {            // 2.2.3.1. 它必须在 promise 的状态变为 rejected 后被调用，并将 promise 的 reason 作为它的第一个参数。            // 2.2.5. onFulfilled 和 onRejected 必须作为函数调用。            const x = onRejected(self.data);            // 2.2.7.1. 如果 onFulfilled 或 onRejected 返回了一个值 x，则运行 Promise 处理程序 [[Resolve]](promise2, x)。            promiseResolutionProcedure(promise2, x, resolve, reject);          } catch (e) {            // 2.2.7.2. 如果 onFulfilled 或 onRejected 抛出了一个异样，promise2 必须用 e 作为 reason 来变为 rejected 状态。            reject(e);          }        }        // 2.2.7.4. 如果 onRejected 不是一个函数且 promise1 为 rejected 状态，promise2 必须用和 promise1 一样的 reason 来变为 rejected 状态。        else {          reject(self.data);        }      });    } else if (self.state === "pending") {      // 2.2.6. then 可能会被同一个 promise 屡次调用。      // 2.2.6.1. 如果 promise 处于 fulfilled 状态，所有相应的 onFulfilled 回调必须依照它们对应的 then 的原始调用程序来执行。      self.onFulfilledCallback.push(function (promise1Value) {        if (typeof onFulfilled === "function") {          try {            // 2.2.2.1. 它必须在 promise 的状态变为 fulfilled 后被调用，并将 promise 的值作为它的第一个参数。            // 2.2.5. onFulfilled 和 onRejected 必须作为函数调用。            const x = onFulfilled(self.data);            // 2.2.7.1. 如果 onFulfilled 或 onRejected 返回了一个值 x，则运行 Promise 处理程序 [[Resolve]](promise2, x)。            promiseResolutionProcedure(promise2, x, resolve, reject);          } catch (e) {            // 2.2.7.2. 如果 onFulfilled 或 onRejected 抛出了一个异样，promise2 必须用 e 作为 reason 来变为 rejected 状态。            reject(e);          }        }        // 2.2.7.3. 如果 onFulfilled 不是一个函数且 promise1 为 fulfilled 状态，promise2 必须用和 promise1 一样的值来变为 fulfilled 状态。        else {          resolve(promise1Value);        }      });      // 2.2.6.2. 如果 promise 处于 rejected 状态，所有相应的 onRejected 回调必须依照它们对应的 then 的原始调用程序来执行。      self.onRejectedCallback.push(function (promise1Reason) {        if (typeof onRejected === "function") {          try {            // 2.2.3.1. 它必须在 promise 的状态变为 rejected 后被调用，并将 promise 的 reason 作为它的第一个参数。            // 2.2.5. onFulfilled 和 onRejected 必须作为函数调用。            const x = onRejected(self.data);            // 2.2.7.1. 如果 onFulfilled 或 onRejected 返回了一个值 x，则运行 Promise 处理程序 [[Resolve]](promise2, x)。            promiseResolutionProcedure(promise2, x, resolve, reject);          } catch (e) {            // 2.2.7.2. 如果 onFulfilled 或 onRejected 抛出了一个异样，promise2 必须用 e 作为 reason 来变为 rejected 状态。            reject(e);          }        }        // 2.2.7.4. 如果 onRejected 不是一个函数且 promise1 为 rejected 状态，promise2 必须用和 promise1 一样的 reason 来变为 rejected 状态。        else {          reject(promise1Reason);        }      });    }  }));};

3. Promise 处理程序

3.1 流程图

3.2 实现代码

// 2.3. Promise 处理程序// Promise 处理程序是一个将 promise 和 value 作为输出的形象操作，咱们将其示意为 [[Resolve]](promise, x)。// 补充阐明：这里咱们将 resolve 和 reject 也传入进来，因为后续要依据不同的逻辑对 promise 执行 fulfill 或 reject 操作。function promiseResolutionProcedure(promise2, x, resolve, reject) {  // 2.3.1. 如果 promise 和 x 援用的是同一个对象，promise 将以一个 TypeError 作为 reason 来进行 reject。  if (promise2 === x) {    return reject(new TypeError("Chaining cycle detected for promise"));  }  // 2.3.2. 如果 x 是一个 promise，依据它的状态：  if (x instanceof Promise) {    // 2.3.2.1. 如果 x 的状态为 pending，promise 必须放弃 pending 状态直到 x 的状态变为 fulfilled 或 rejected。    if (x.state === "pending") {      x.then(function (value) {        promiseResolutionProcedure(promise2, value, resolve, reject);      }, reject);    }    // 2.3.2.2. 如果 x 的状态为 fulfilled，那么 promise 也用同样的值来执行 fulfill 操作。    else if (x.state === "fulfilled") {      resolve(x.data);    }    // 2.3.2.3. 如果 x 的状态为 rejected，那么 promise 也用同样的 reason 来执行 reject 操作。    else if (x.state === "rejected") {      reject(x.data);    }    return;  }  // 2.3.3. 除此之外，如果 x 是一个对象或者函数，  if (x && (typeof x === "object" || typeof x === "function")) {    // 2.3.3.3.3. 如果 resolvePromise 和 rejectPromise 都被调用，或者屡次调用同样的参数，则第一次调用优先，任何之后的调用都将被疏忽。    let isCalled = false;    try {      // 2.3.3.1. 申明一个 then 变量来保留 then      let then = x.then;      // 2.3.3.3. 如果 then 是一个函数，将 x 作为 this 来调用它，第一个参数为 resolvePromise，第二个参数为 rejectPromise，其中：      if (typeof then === "function") {        then.call(          x,          // 2.3.3.3.1. 假如 resolvePromise 应用一个名为 y 的值来调用，运行 promise 处理程序 [[Resolve]](promise, y)。          function resolvePromise(y) {            // 2.3.3.3.3. 如果 resolvePromise 和 rejectPromise 都被调用，或者屡次调用同样的参数，则第一次调用优先，任何之后的调用都将被疏忽。            if (isCalled) return;            isCalled = true;            return promiseResolutionProcedure(promise2, y, resolve, reject);          },          // 2.3.3.3.2. 假如 rejectPromise 应用一个名为 r 的 reason 来调用，则用 r 作为 reason 对 promise 执行 reject 操作。          function rejectPromise(r) {            // 2.3.3.3.3. 如果 resolvePromise 和 rejectPromise 都被调用，或者屡次调用同样的参数，则第一次调用优先，任何之后的调用都将被疏忽。            if (isCalled) return;            isCalled = true;            return reject(r);          }        );      }      // 2.3.3.4. 如果 then 不是一个函数，应用 x 作为值对 promise 执行 fulfill 操作。      else {        resolve(x);      }    } catch (e) {      // 2.3.3.2. 如果检索 x.then 的后果抛出异样 e，应用 e 作为 reason 对 promise 执行 reject 操作。      // 2.3.3.3.4. 如果调用 then 时抛出一个异样 e，      // 2.3.3.3.4.1. 如果 resolvePromise 或 rejectPromise 曾经被调用过了，则疏忽异样。      if (isCalled) return;      isCalled = true;      // 2.3.3.3.4.2. 否则，应用 e 作为 reason 对 promise 执行 reject 操作。      reject(e);    }  }  // 2.3.4. 如果 x 不是一个对象或者函数，应用 x 作为值对 promise 执行 fulfill 操作。  else {    resolve(x);  }}

4. 残缺代码

function Promise(executor) {  this.state = "pending";  this.onFulfilledCallback = [];  this.onRejectedCallback = [];  const self = this;  function resolve(value) {    setTimeout(function () {      if (self.state === "pending") {        self.state = "fulfilled";        self.data = value;        for (let i = 0; i < self.onFulfilledCallback.length; i++) {          self.onFulfilledCallback[i](value);        }      }    });  }  function reject(reason) {    setTimeout(function () {      if (self.state === "pending") {        self.state = "rejected";        self.data = reason;        for (let i = 0; i < self.onRejectedCallback.length; i++) {          self.onRejectedCallback[i](reason);        }      }    });  }  try {    executor(resolve, reject);  } catch (reason) {    reject(reason);  }}Promise.prototype.then = function (onFulfilled, onRejected) {  const self = this;  let promise2;  return (promise2 = new Promise(function (resolve, reject) {    if (self.state === "fulfilled") {      setTimeout(function () {        if (typeof onFulfilled === "function") {          try {            const x = onFulfilled(self.data);            promiseResolutionProcedure(promise2, x, resolve, reject);          } catch (e) {            reject(e);          }        } else {          resolve(self.data);        }      });    } else if (self.state === "rejected") {      setTimeout(function () {        if (typeof onRejected === "function") {          try {            const x = onRejected(self.data);            promiseResolutionProcedure(promise2, x, resolve, reject);          } catch (e) {            reject(e);          }        } else {          reject(self.data);        }      });    } else if (self.state === "pending") {      self.onFulfilledCallback.push(function (promise1Value) {        if (typeof onFulfilled === "function") {          try {            const x = onFulfilled(self.data);            promiseResolutionProcedure(promise2, x, resolve, reject);          } catch (e) {            reject(e);          }        } else {          resolve(promise1Value);        }      });      self.onRejectedCallback.push(function (promise1Reason) {        if (typeof onRejected === "function") {          try {            const x = onRejected(self.data);            promiseResolutionProcedure(promise2, x, resolve, reject);          } catch (e) {            reject(e);          }        } else {          reject(promise1Reason);        }      });    }  }));};function promiseResolutionProcedure(promise2, x, resolve, reject) {  if (promise2 === x) {    return reject(new TypeError("Chaining cycle detected for promise"));  }  if (x instanceof Promise) {    if (x.state === "pending") {      x.then(function (value) {        promiseResolutionProcedure(promise2, value, resolve, reject);      }, reject);    } else if (x.state === "fulfilled") {      resolve(x.data);    } else if (x.state === "rejected") {      reject(x.data);    }    return;  }  if (x && (typeof x === "object" || typeof x === "function")) {    let isCalled = false;    try {      let then = x.then;      if (typeof then === "function") {        then.call(          x,          function resolvePromise(y) {            if (isCalled) return;            isCalled = true;            return promiseResolutionProcedure(promise2, y, resolve, reject);          },          function rejectPromise(r) {            if (isCalled) return;            isCalled = true;            return reject(r);          }        );      } else {        resolve(x);      }    } catch (e) {      if (isCalled) return;      isCalled = true;      reject(e);    }  } else {    resolve(x);  }}module.exports = Promise;

测试代码

结尾咱们就说过，Promises/A+ 标准配套了成熟的测试用例，咱们必须全副通过才算代码编写正确。上面咱们就用 872 个官网测试用例来测试一下咱们的残缺代码是否合乎 Promises/A+ 标准。

1. 裸露一个简略的适配器接口

// test.js// 导入咱们写好的 promiseconst Promise = require("./promise.js");// 依据官网文档裸露一个 deferred 办法，返回一个蕴含 promise、resolve、reject 的对象Promise.deferred = function () {  const obj = {};  obj.promise = new Promise(function (resolve, reject) {    obj.resolve = resolve;    obj.reject = reject;  });  return obj;};module.exports = Promise;

2. 运行命令

$ npx promises-aplus-tests test.js

3. 测试后果

完满通过！

参考资料

  1. Promises/A+
  2. Promises/A+ Compliance Test Suite