我的测试环境： chorme 85.0.4183.83

写作动机：

最近在手写Promise时，在实现过程中发现Promise核心思路并不复杂， 只不过细节众多， 很容易深陷逻辑分支漩涡。因此想和大家分享以下我手写Promise的思路。同时希望各位看官老爷帮我测试一下是否和原生Promise表现一致，先给老爷们跪下了~~QAQ

基础版本

根据Promise用法， 先实现一个基础版本的Promise，具有以下功能：
1. Promise实例具有state属性表示自身状态， 实例具有三种状态： pending、fulfilled、rejected， 初始值为pending
2. Promise实例具有result属性表示结果。初始值为undefined。
3. Promise实例的状态（state）和结果（result）值只能通过resolve，reject修改， 无法通过修改实例属性修改其值，其中state从pending变为settleed状态（fulfilled、rejected）之后， 就不可变了
4. 实例化Promise对象时， 构造函数执行”executor”函数参数, 并传给”executor”函数两个函数：resolve和reject，分别能够将Promise实例的状态（state）变为”fulfilled”和”rejected”, 同时将实例的结果（result）值设为resolve或reject函数接受的参数值。
5. 如果执行executor报错将会返回一个状态为rejected的Promise， 结果为报错信息

  1. const STATE_PENDING = "pending";
  2. const STATE_FULFILLED = "fulfilled";
  3. const STATE_REJECTED = "rejected";
  5. function Promise(executor){
  6.     if (typeof executor !== "function") {
  7.     throw new Error("Promise resolver undefined is not a function");
  8.   }
  10.   let _self = this
  11.   let _state = STATE_PENDING
  12.   let _result = undefined
  14.   Object.defineProperties(_self, {
  15.     state: {
  16.       get: () => _state,
  17.       set: () => _state,
  18.       enumerable: true
  19.     },
  20.     result: {
  21.       get: () => _result,
  22.       set: () => _result,
  23.       enumerable: true
  24.     }
  25.   });
  27.   function resolve(newResult) {
  28.     if(_state !== STATE_PENDING) {
  29.        return
  30.     }
  31.     _self.state = _state = STATE_FULFILLED
  32.     _self.result = _result = newResult
  33.   }
  35.   function reject(newResult) {
  36.     if(_state !== STATE_PENDING) {
  37.        return
  38.     }
  39.     _self.state = _state = STATE_REJECTED
  40.     _self.result = _result = newResult
  41.   }
  43.   try {
  44.       executor(resolve, reject)
  45.   } catch(e) {
  46.     reject(e)
  47.   }
  48. }

测试结果：

  1. new Promise()    // Uncaught Error: Promise resolver undefined is not a function
  3. console.log(JSON.stringify(new Promise(() => {})))
  4. //    {"state":"pending"}
  6. console.log(JSON.stringify(new Promise((resolve) => resolve())))
  7. //    {"state":"fulfilled"}
  9. console.log(JSON.stringify(new Promise((resolve, reject) => reject())))
  10. //    {"state":"rejected"}
  12. console.log(new Promise(() => {
  13.     throw new Error("executor error!")
  14. }))
  15. //    {
  16. //        result: Error: executor error! at <anonymous>:2:8 at new Promise (<anonymous>:44:4) at <anonymous>:1:9
  17. //        state: "rejected"
  18. //    }
  20. let promise = new Promise(() => {})
  21. console.log(JSON.stringify(promise))    //    {"state":"pending"}
  22. promise.state = "rejected"
  23. promise.result = "error!"
  24. console.log(JSON.stringify(promise))    //    {"state":"pending"}
  26. let promise = new Promise((resolve, reject) => {
  27.     resolve();
  28.   reject();
  29. })
  31. console.log(promise)    //    {"state":"fulfiiled"}

到目前为止， 一个基础版的Promise的构造函数算是完成了。我们已经能实例化一个Promise，它具有state、result属性，其值只能通过resolve，reject更改， 不能被外部修改。

现在我们开始给Promise添加更多功能。

回调函数

Promise实例能够调用then、catch函数、finally。这三个函数将会给实例注册回调函数。同时返回一个新的Promise实例。

当Promise实例的状态发生改变后， 将异步执行回调函数。如果状态变成fulfilled执行onFulfilled函数， rejected执行onRejected函数。执行异步函数时， 会将Promise实例的result作为参数传入异步函数。

其中then能够注册onFulfilled、onRejecte方法，catch注册onRejected方法。finally和then相似（后面会列出差异）

简单理解：then、finally、catch其实就是给实例注册回调函数，而resolve、reject除了改变自身的state和result还需要异步执行回调函数。

现在我们重构Promise，使其能够使用then、finally、catch注册并异步执行回调函数。

  1. // 修改resolve、reject
  2. function resolve(newResult) {
  3.   if (_state !== STATE_PENDING) {
  4.     return;
  5.   }
  6.   _self.state = _state = STATE_FULFILLED;
  7.   _self.result = _result = newResult;
  8.   setTimeout(handleCallback);
  9. }
  11. function reject(newResult) {
  12.   if (_state !== STATE_PENDING) {
  13.     return;
  14.   }
  15.   _self.state = _state = STATE_REJECTED;
  16.   _self.result = _result = newResult;
  17.   setTimeout(handleCallback);
  18. }
  20. function handleCallback() {
  21.   let callback;
  22.   switch (_state) {
  23.     case STATE_FULFILLED:
  24.       callback = _self.callback && _self.callback.onFulfilled;
  25.       break;
  26.     case STATE_REJECTED:
  27.       callback = _self.callback && _self.callback.onRejected;
  28.       break;
  29.     default:
  30.   }
  32.   callback(_result);
  33. }
  35. // 新增
  36. Promise.prototype.then = function (onFulfilled, onRejected) {
  37.     this.callback = {
  38.       onFulfilled, 
  39.     onRejected
  40.   }
  41. };
  43. Promise.prototype.catch = function (onRejected) {
  44.   return this.then(null, onRejected);
  45. };
  47. Promise.prototype.finally = function (onFinally) {
  48.   return this.then(onFinally, onFinally);
  49. };

链式调用

Promise最大的特点是链式回调，通过链式调用能够将依赖性比较强的异步任务按序执行。通过传统方式回调深渊也能够实现， 但是显而易见， 在写法上Promise更加优雅、简洁易懂。

但是Promise链式回调同样是在手写过程中最棘手的部分， 因为其中有许多细节。

接下来我说一下特征和难点
特征：
1. 不使用finally的情况下，Promise回调函数链式执行，如果执行回调函数成功，那么执行下一个Promise的onFulfilled回调函数，传入当前回调函数返回值。如果执行回调函数失败，那么执行下一个Promise的onRejected回调函数，传入当前回调函数返回值。
2. 使用finally的情况下, 回调函数不会接受上一个回调函数的结果，并且执行下一个Promise的哪个回调函数由上一个Promise的状态决定， 传给下一个回调函数的参数也是上一个Promise的result。
3. 如果返回值是Promise， 如果Promise没有异常，无论是否为finally注册的回调函数，则回调函数将会等到返回的Promise状态settled之后触发。如果返回 实例化Promise过程报错， 那么将不会触发下一个Promise的onReject。

总之就是一句话：finally比较特殊， 需要单独做大量的处理。

现在有以下问题：then、catch、finally给当前Promise实例注册回调函数，返回了一个新的Promise，而回调函数会链式执行。那么当前Promise实例在执行完回调函数之后，是如何执行新的Promise回调函数的？

由于Promise的state和result只能通过resolve和reject函数改变实例state和result的值。

然后，在设计代码的时候，我草率地决定采取单链实现Promise的异步回调。通过then、catch、finally注册回调函数的同时，将新的Promise的resolve，reject函数绑定在当前Promise实例上， 这样就能够做到Promise实例在执行回调函数时，通过执行下一个Promise的resolve和reject函数，控制下一个Promise的state和result。

由于resolve和reject函数会异步执行回调函数，这样就可以实现Promise回调函数会一直沿着链执行回调函数

这个时候我对Promise链式执行过程的有了那么一内内的理解：

  1. 实例化了一个Promise， 在某个时刻会触发resolve或者reject函数
  2. then给Promise实例注册了回调函数（onFulfilled、onRejected），同时返回一个实例化的新的Promise。在使用构造函数实例化新的Promise过程中， 将新的Promise的内部方法resolve和reject的引用保存在Promise实例上， 使得Promise实例能够控制所有新产生的Promise的state和result
  3. catch原理和then一样， 只不过只注册onRejected函数
  4. finally原理同then一样， 只不过onFulfilled和onRejected都是同一个回调函数， 同时在Promise实例上标记finally帮助在执行回调函数时做一些处理
  5. 当resolve，reject触发。同步地更改Promise实例state和result，异步执行内部回调方法handleChainWork。
  6. handleChainWork主要做两件事：同步执行回调函数，异步改变下一个Promise的stae和result（通过resolve、reject）。当下一个Promise的resolve和reject触发， 又开始做第5点。

然后我实现了Promise能够链式调用的代码。主要处理逻辑在handleChainWork中，下面是实现Promise链式调用的代码：

  1. const STATE_PENDING = "pending";
  2. const STATE_FULFILLED = "fulfilled";
  3. const STATE_REJECTED = "rejected";
  5. const defaultCallback = (result) => result;
  6. const handleUncaughtRejection = (err) => console.error(err);
  7. const curry = (fn) => {
  8.   const args = [];
  9.   return function reducer(param) {
  10.     args.push(param);
  11.     if (args.length < fn.length) {
  12.       return reducer;
  13.     }
  14.     fn(...args);
  15.   };
  16. };
  17. const handleChainWork = function (subscriber, promiseCallback = {}) {
  18.   const state = this.state;
  19.   const originResult = this.result;
  20.   const isFinallyCb = this.isFinallyCb;
  22.   let callbackResult;
  23.   let deliveredResult;
  24.   let callback;
  25.   let wakeupChild;
  26.   let hasCallbakck;
  28.   switch (state) {
  29.     case STATE_FULFILLED:
  30.       hasCallbakck = !!promiseCallback.onFulfilled;
  31.       callback = promiseCallback.onFulfilled || defaultCallback;
  32.       wakeupChild = subscriber.resolve;
  33.       break;
  34.     case STATE_REJECTED:
  35.       hasCallbakck = !!promiseCallback.onRejected;
  36.       callback =
  37.         promiseCallback.onRejected ||
  38.         (this.subscribers.length ? defaultCallback : handleUncaughtRejection);
  39.       wakeupChild =
  40.         ((isFinallyCb || !hasCallbakck) && subscriber.reject) ||
  41.         subscriber.resolve;
  42.       break;
  43.     default:
  44.   }
  46.   // excute callback
  47.   try {
  48.     if (isFinallyCb) {
  49.       callbackResult = callback();
  50.       deliveredResult = originResult;
  51.     } else {
  52.       deliveredResult = callbackResult = callback(originResult);
  53.     }
  54.   } catch (e) {
  55.     if (isFinallyCb) {
  56.       setTimeout(() => wakeupChild(deliveredResult));
  57.       throw new Error(e);
  58.     } else {
  59.       subscriber.reject(e);
  60.     }
  61.   }
  63.   // case callback return a Promise
  64.   if (callbackResult instanceof Promise || deliveredResult instanceof Promise) {
  65.     let promiseCallback = [subscriber.resolve, subscriber.reject];
  67.     if (callbackResult instanceof Promise) {
  68.       callbackResult.then(...promiseCallback);
  69.     } else {
  70.       deliveredResult.then(...promiseCallback);
  71.     }
  72.     return;
  73.   }
  75.   setTimeout(() => wakeupChild(deliveredResult));
  76. };
  78. function Promise(executor) {
  79.   if (typeof executor !== "function") {
  80.     throw new Error("Promise resolver undefined is not a function");
  81.   }
  83.   // in case "this" point to window in setTimeout
  84.   const _self = this;
  86.   // state & result is immutable becauseof closure
  87.   // but they also can be gotten by this.XXX
  88.   let _state = STATE_PENDING;
  89.   let _result = undefined;
  90.   Object.defineProperties(_self, {
  91.     state: {
  92.       get: () => _state,
  93.       set: () => _state,
  94.       enumerable: true
  95.     },
  96.     result: {
  97.       get: () => _result,
  98.       set: () => _result,
  99.       enumerable: true
  100.     }
  101.   });
  102.   _self.subscribers = [];
  103.   _self.callbacks = [];
  105.   function handleStateChange(newState, result) {
  106.     if (_state !== STATE_PENDING) {
  107.       return;
  108.     }
  109.     _self.result = _result = result;
  110.     _self.state = _state = newState;
  112.     setTimeout(() => {
  113.       _self.subscribers.forEach((subscriber, index) => {
  114.         handleChainWork.bind(_self)(subscriber, _self.callbacks[index]);
  115.       });
  116.     });
  117.   }
  119.   const resolve = curry(handleStateChange)(STATE_FULFILLED);
  120.   const reject = curry(handleStateChange)(STATE_REJECTED);
  122.   try {
  123.     executor(resolve, reject);
  124.   } catch (error) {
  125.     reject(error);
  126.   }
  127. }
  129. Promise.prototype.then = function (onFulfilled, onRejected) {
  130.   return new Promise((next_res, next_rej) => {
  131.     this.subscribers.push({ resolve: next_res, reject: next_rej });
  132.     this.callbacks.push({ onFulfilled, onRejected });
  133.   });
  134. };
  136. Promise.prototype.catch = function (onRejected) {
  137.   return this.then(null, onRejected);
  138. };
  140. Promise.prototype.finally = function (onFinally) {
  141.   this.isFinallyCb = true;
  142.   return this.then(onFinally, onFinally);
  143. };
  145. export default Promise;

这个时候我可牛逼坏了，Promise我也能手写出来了， 可以发个博客装逼了。
但是我却发现大佬们写的Promise全是清一色的队列，我还隐隐约约看到了秘籍（可能是忍者秘籍上的知识点吧），既然是队列， 该不会Promise还可以支持多个回调函数吧？
我这么一试，还真是：

  1. let promise_1 = new Promise((res, rej) =>
  2.       Math.random() * 2 > 1 ? res("行动开始") : rej("有内鬼， 交易终止")
  3.     );
  4. promise_1.then(() => console.log("代少知道了"));
  5. promise_1.then(() => console.log("小王知道了"));
  6. promise_1.catch((error) => console.log(error));
  8. //     代少知道了
  9. //    小王知道了

Promise - 图1

所以我们需要重新调整思路， 不过大致的思路还是一样的。只不过从单链结构转换成了树状结构。也就是说：

  • 当使用then、catch、finally创建了一个新的Promise：pChild时，需要将注册的回调函数放到当前Promise实例的callbackArray中去， pChild的resolve和reject同样放到当前Promise实例的childStateControllerArray中去。
  • 当Promise状态改变时，异步执行函数，该函数遍历callbackArray数组， 执行handleChainWork（核心工作基本没有发生太多的变化）。

这是实现了Promise支持多个回调函数后的代码：

  1. const STATE_PENDING = "pending";
  2. const STATE_FULFILLED = "fulfilled";
  3. const STATE_REJECTED = "rejected";
  5. const defaultCallback = (result) => result;
  6. const handleUncaughtRejection = (err) => console.error(err);
  7. const curry = (fn) => {
  8.   const args = [];
  9.   return function reducer(param) {
  10.     args.push(param);
  11.     if (args.length < fn.length) {
  12.       return reducer;
  13.     }
  14.     fn(...args);
  15.   };
  16. };
  17. const handleChildWork = function (child, promiseCallback = {}) {
  18.   const state = this.state;
  19.   const originResult = this.result;
  20.   const isFinallyCb = this.isFinallyCb;
  22.   let callbackResult;
  23.   let deliveredResult;
  24.   let readyCallback;
  25.   let wakeupChild;
  26.   let hasCallbakck;
  28.   switch (state) {
  29.     case STATE_FULFILLED:
  30.       hasCallbakck = !!promiseCallback.onFulfilled;
  31.       readyCallback = promiseCallback.onFulfilled || defaultCallback;
  32.       wakeupChild = child.resolve;
  33.       break;
  34.     case STATE_REJECTED:
  35.       hasCallbakck = !!promiseCallback.onRejected;
  36.       readyCallback = promiseCallback.onRejected || defaultCallback;
  37.       wakeupChild =
  38.         ((isFinallyCb || !hasCallbakck) && child.reject) || child.resolve;
  39.       break;
  40.     default:
  41.   }
  43.   // excute callback
  44.   try {
  45.     if (isFinallyCb) {
  46.       callbackResult = readyCallback();
  47.       deliveredResult = originResult;
  48.     } else {
  49.       deliveredResult = callbackResult = readyCallback(originResult);
  50.     }
  51.   } catch (e) {
  52.     if (isFinallyCb) {
  53.       setTimeout(wakeupChild, 0, deliveredResult);
  54.       throw new Error(e);
  55.     } else {
  56.       child.reject(e);
  57.     }
  58.   }
  60.   // case callback return a Promise
  61.   if (callbackResult instanceof Promise || deliveredResult instanceof Promise) {
  62.     let promiseCallback = [child.resolve, child.reject];
  64.     if (callbackResult instanceof Promise) {
  65.       callbackResult.then(...promiseCallback);
  66.     } else {
  67.       deliveredResult.then(...promiseCallback);
  68.     }
  69.     return;
  70.   }
  72.   setTimeout(wakeupChild, 0, deliveredResult);
  73. };
  75. function Promise(executor) {
  76.   if (typeof executor !== "function") {
  77.     throw new Error("Promise resolver undefined is not a function");
  78.   }
  80.   // in case "this" point to window in setTimeout
  81.   const _self = this;
  83.   // state & result is immutable becauseof closure
  84.   // but they also can be gotten by this.XXX
  85.   let _state = STATE_PENDING;
  86.   let _result = undefined;
  87.   Object.defineProperties(_self, {
  88.     state: {
  89.       get: () => _state,
  90.       set: () => _state,
  91.       enumerable: true
  92.     },
  93.     result: {
  94.       get: () => _result,
  95.       set: () => _result,
  96.       enumerable: true
  97.     }
  98.   });
  99.   _self.childStateControllerArray = [];
  100.   _self.callbackArray = [];
  102.   function handleStateChange(newState, result) {
  103.     if (_state !== STATE_PENDING) {
  104.       return;
  105.     }
  106.     _self.result = _result = result;
  107.     _self.state = _state = newState;
  109.     setTimeout(() => {
  110.       if (!_self.callbackArray.length && newState === STATE_REJECTED) {
  111.         handleUncaughtRejection(result);
  112.         return;
  113.       }
  114.       _self.childStateControllerArray.forEach((child, index) => {
  115.         handleChildWork.bind(_self)(child, _self.callbackArray[index]);
  116.       });
  117.     });
  118.   }
  120.   const resolve = curry(handleStateChange)(STATE_FULFILLED);
  121.   const reject = curry(handleStateChange)(STATE_REJECTED);
  123.   try {
  124.     executor(resolve, reject);
  125.   } catch (error) {
  126.     reject(error);
  127.   }
  128. }
  130. Promise.prototype.then = function (onFulfilled, onRejected) {
  131.   return new Promise((next_res, next_rej) => {
  132.     this.childStateControllerArray.push({
  133.       resolve: next_res,
  134.       reject: next_rej
  135.     });
  136.     this.callbackArray.push({ onFulfilled, onRejected });
  137.   });
  138. };
  140. Promise.prototype.catch = function (onRejected) {
  141.   return this.then(null, onRejected);
  142. };
  144. Promise.prototype.finally = function (onFinally) {
  145.   this.isFinallyCb = true;
  146.   return this.then(onFinally, onFinally);
  147. };
  149. export default Promise;

下面是的代码是reject、resovle、allSettled、all、race静态方法的实现。

  1. const STATE_PENDING = "pending";
  2. const STATE_FULFILLED = "fulfilled";
  3. const STATE_REJECTED = "rejected";
  5. const checkIteratable = (data) => {
  6.   if (typeof data[Symbol.iterator] !== "function") {
  7.     throw new TypeError(`${typeof data} is not iterable`);
  8.   }
  9.   return true;
  10. };
  11. // this function will effect the source array
  12. const waitAllPromisesSetteled = (promiseArray, callback) => {
  13.   const settledArray = [];
  15.   return new Promise((resolve, reject) => {
  16.     function handlePromiseItemSettled() {
  17.       settledArray.push(this);
  18.       if (settledArray.length < promiseArray.length) {
  19.         return;
  20.       }
  22.       callback({ settledArray, resolve, reject });
  23.     }
  25.     promiseArray.forEach((item, index, arr) => {
  26.       // effect the source array
  27.       if (!item instanceof Promise) {
  28.         item = arr[index] = Promise.resolve(item);
  29.       }
  30.       if (item.state === STATE_PENDING) {
  31.         const promiseCallback = handlePromiseItemSettled.bind(item);
  32.         item.then(promiseCallback, promiseCallback);
  33.       } else {
  34.         settledArray.push(item);
  35.       }
  36.       if (settledArray.length === promiseArray.length) {
  37.         callback({ settledArray, resolve, reject });
  38.       }
  39.     });
  40.   });
  41. };
  43. Promise.resolve = function (data) {
  44.   if (data instanceof Object && typeof data.then === "function") {
  45.     data = new Promise(data.then);
  46.   }
  47.   if (data instanceof Promise) {
  48.     return data;
  49.   }
  50.   return new Promise((res) => res(data));
  51. };
  53. Promise.reject = function (result) {
  54.   return new Promise((res, rej) => rej(result));
  55. };
  57. Promise.race = function (promiseArray) {
  58.   checkIteratable(promiseArray);
  60.   return waitAllPromisesSetteled(
  61.     promiseArray,
  62.     ({ settledArray, resolve, reject }) => {
  63.       let fastestItem = settledArray[0];
  64.       switch (fastestItem.state) {
  65.         case STATE_REJECTED:
  66.           reject(fastestItem.result);
  67.           break;
  68.         case STATE_FULFILLED:
  69.           resolve(fastestItem.result);
  70.           break;
  71.         default:
  72.       }
  73.     }
  74.   );
  75. };
  77. Promise.all = function (promiseArray) {
  78.   checkIteratable(promiseArray);
  79.   if (!promiseArray.length) {
  80.     return new Promise((res) => res([]));
  81.   }
  82.   const hasPromiseitem = promiseArray.every((item) => item instanceof Promise);
  83.   return waitAllPromisesSetteled(
  84.     promiseArray,
  85.     ({ settledArray, resolve, reject }) => {
  86.       if (!hasPromiseitem) {
  87.         setTimeout(resolve, 0, promiseArray);
  88.         return;
  89.       }
  91.       const rejectedPromise = settledArray.find(
  92.         (item) => item.state === STATE_REJECTED
  93.       );
  94.       if (rejectedPromise) {
  95.         reject(rejectedPromise.result);
  96.         return;
  97.       }
  99.       const results = promiseArray.map((item) => item.result);
  100.       resolve(results);
  101.     }
  102.   );
  103. };
  105. Promise.allSettled = function (promiseArray) {
  106.   checkIteratable(promiseArray);
  107.   return waitAllPromisesSetteled(promiseArray, ({ resolve }) => {
  108.     resolve(promiseArray);
  109.   });
  110. };

完整代码在：
https://codesandbox.io/s/promise-3n8yf?file=/src/Promise.js

最后

感谢各位看官老爷在百忙之中抽出时间看我的文章
如果文中代码有和原生Promise表现不一致的地方欢迎大家评论，探讨

最后我再不要脸的要个赞吧
Promise - 图2