回顾用法

  1. let  promise =  new Promise((resolve, reject) => {
  2.     resolve('成功')
  3.     resolve('reject')
  4. })
  5. promise.then(value => {}, reason => {})
  1. Promise就是一个类 在执行这个类的时候，需要传递一个执行器进去 执行器会立即执行
  2. Promise 有三种状态 分别为成功 fulfilled、 失败 rejected、 等待 pending。
    • 一旦状态确定就不可更改
    • pending -> fulfilled
    • pending -> rejected
  3. resolve 和 rejected 函数是用来更改状态的
    • resolve : fulfilled
    • reject : rejected
  4. then方法内部做的事情就判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用失败回调函数 then方法是被定义在原型对象中的
  5. then成功回调有一个参数 表示成功之后的值 then失败回调有一个参数 表示失败后的原因

核心逻辑

定义状态枚举

  • 把三个状态定义为枚举。 便于以后的非字符串输入引起错误

    1. const PENDING = "pending";
    2. const RESOLVED = "resolved";
    3. const REJECTED = "rejected";

    定义一个类

  • 在回顾用法中知道，new promise 过程中会传入

    1. class MyPromise {
    2. constructor(executor) {
    3.  executor(this.resolve, this.reject);
    4. }
    5. }

    状态更改

  • 状态只允许更改一次。，要做非等待状态的判断

  • 修改对应的状态 ```javascript class MyPromise { constructor(executor) { executor(this.resolve, this.reject); } status = PENDING;

    resolve = () => { // 状态只允许更改一次。 if (this.status !== PENDING) return; // 将状态更改为成功 this.status = RESOLVED; };

    reject = () => { if (this.status !== PENDING) return; // 将状态更改为失败 this.status = REJECTED; }; }

  1. <a name="IQyoh"></a>
  2. ###  then
  4. - 会有成功 、 失败的回调
  5. - 回调会有原因， 因此在改变状态的时候需要保存原因，在回调的时候返回
  6. ```javascript
  7. class MyPromise {
  8.   constructor(executor) {
  9.     executor(this.resolve, this.reject);
  10.   }
  11.   status = PENDING;
  12.   value  = undefined 
  13.   reason = undefined
  15.   resolve = value => {
  16.     if (this.status !== PENDING) return;
  17.     this.status = RESOLVED;
  18.     // 1 保存成功原因
  19.     this.value = value
  20.   };
  22.   reject = reason => {
  23.     if (this.status !== PENDING) return;
  24.     this.status = REJECTED;
  25.     // 1 保存失败原因
  26.     this.reason = reason
  28.   };
  30.   then(successCallback, failCallback) {
  31.     // 2 判断状态
  32.     if(this.status === RESOLVED) {
  33.       successCallback(this.value)
  34.     } else if(this.status === REJECTED){
  35.       failCallback(this.reason)
  36.     }
  37.   }
  38. }

异步逻辑

  1. eg:  异步回调。 
  1. let promise = new Promise((resolve, reject) => {
  2.   setTimeout(() => {
  3.     resolve("成功");
  4.     reject('失败')
  5.   }, 20000)
  6. });
  7. promise.then(
  8.   (value) => {
  9.     console.log("----value", value);
  10.   },
  11.   (reason) => {
  12.     console.log("----reason", reason);
  13.   }
  14. );

此时按照目前的逻辑，是不会执行 successCallback 或 failCallback。

改造：

  • then 中判断是否是 等待状态 ，如果是，保存 成功和失败 的callback

  • 在resolve 、reject中判断 这个回调是否存在，存在并把对应参数带回去调用。

    1. class MyPromise {
    2. constructor(executor) {
    3.   executor(this.resolve, this.reject);
    4. }
    5. status = PENDING;
    6. value = undefined;
    7. reason = undefined;
    8.   // 1 定义两个callback变量
    9. successCallback = undefined;
    10. failCallback = undefined;
    12. resolve = (value) => {
    13.   if (this.status !== PENDING) return;
    14.   this.status = RESOLVED;
    15.   this.value = value;
    16.   // 2 如果有callback则调用，并把对应参数带过去
    17.   this.successCallback && this.successCallback(this.value)
    18. };
    20. reject = (reason) => {
    21.   if (this.status !== PENDING) return;
    22.   this.status = REJECTED;
    23.   this.reason = reason;
    24.   // 2 如果有callback则调用，并把对应参数带过去
    25.   this.failCallback && this.failCallback(this.reason)
    26. };
    28. then(successCallback, failCallback) {
    29.   if (this.status === RESOLVED) {
    30.     successCallback(this.value);
    31.   } else if (this.status === REJECTED) {
    32.     failCallback(this.reason);
    33.   } else  {
    34.     // 3 如果还是等待状态，保存callback
    35.     this.successCallback = successCallback;
    36.     this.failCallback = failCallback;
    37.   }
    38. }
    39. }

    then 方法多次调用添加多个处理函数

    同一个promise对象下面的then方法是可以被调用多次的。
    eg: ```javascript let promise = new MyPromise((resolve, reject) => { setTimeout(() => { resolve(“成功”); reject(“失败”); }, 2000); // resolve(“成功”); // reject(“失败”); }); promise.then( (value) => { console.log(“——value”, value); }, (reason) => { console.log(“——reason”, reason); } );

promise.then((value) => { console.log(1, value); }); promise.then((value) => { console.log(2, value); }); promise.then((value) => { console.log(3, value); });

  1. 那么在此时，目前的代码只会保存最后一次的 `callback`,  因此我们需要
  3. -  将`callback` 改造成数组
  4. ```javascript
  5. class MyPromise {
  6.   constructor(executor) {
  7.     executor(this.resolve, this.reject);
  8.   }
  9.   status = PENDING;
  10.   value = undefined;
  11.   reason = undefined;
  12.     // 1 变成数组
  13.   successCallback = [];
  14.   failCallback = []
  16.   resolve = (value) => {
  17.     if (this.status !== PENDING) return;
  18.     this.status = RESOLVED;
  19.     this.value = value;
  20.     // 2 while 判断长度，shift 不断推出第一个元素，将this.value传进去
  21.     while(this.successCallback.length) this.successCallback.shift()(this.value)
  22.   };
  24.   reject = (reason) => {
  25.     if (this.status !== PENDING) return;
  26.     this.status = REJECTED;
  27.     this.reason = reason;
  28.     // 2 while 判断长度，shift 不断推出第一个元素，将this.value传进去
  29.      while(this.failCallback.length) this.failCallback.shift()(this.reason)
  30.   };
  32.   then(successCallback, failCallback) {
  33.     if (this.status === RESOLVED) {
  34.       successCallback(this.value);
  35.     } else if (this.status === REJECTED) {
  36.       failCallback(this.reason);
  37.     } else  {
  38.       // 3 变成push
  39.       this.successCallback.push(successCallback);
  40.       this.failCallback.push(failCallback);
  41.     }
  42.   }
  43. }

链式调用

then方法是可以被链式调用的, 后面then方法的回调函数拿到值的是上一个then方法的回调函数的返回值

普通值

  1. let promise = new Promise((resolve, reject) => {
  2.   resolve("成功");
  3. });
  5. promise.then((value) => {
  6.   console.log(1, value);
  7.   return 100
  8. }).then(value => {
  9.   console.log(value);
  10. })

输出结果如下
image.png
因此我们需要

  • 返回新的 promise
  • successCallback 返回的东西也需要带给下一个 .then

  • 以前then 需要立即执行，放哪？ -> 放入 new Promise 中，立即执行

    1. then(successCallback, failCallback) {
    2.   // 定义为一个新的Promise
    3.   let promise2 = new MyPromise((resolve, reject) => {
    4.     if (this.status === RESOLVED) {
    5.       // 将当前successCallback return 的值返回
    6.       let x = successCallback(this.value);
    7.       resolve(x)
    8.     } else if (this.status === REJECTED) {
    9.       failCallback(this.reason);
    10.     } else {
    11.       this.successCallback.push(successCallback);
    12.       this.failCallback.push(failCallback);
    13.     }
    14.   });
    15.   // 将新的Promise返回，以完成链式调用
    16.   return promise2;
    17. }

    callback 返回的又是一个Promise

    特俗的， 如果返回的又是一个Promise， 那么我们需要判断，Promise的状态是成功 的还是失败的，如果是成功，则调用resolve， 如果是 失败，则要 reject。
    需要处理逻辑的如下

  • 判断 x 的值是普通值还是promise对象

  • 如果是普通值 直接调用resolve
  • 如果是promise对象 查看promsie对象返回的结果
  • 再根据promise对象返回的结果 决定调用resolve 还是调用reject

我们定义一个新方法resolvePromise（不是类中的方法，定义在类之外），便于统一调用。 传递的参数分别是 callback的值，resolve， reject

  1. function resolvePromise (x, resolve, reject) {
  2.    //判断 x 的值是否 promise 对象
  3.   if (x instanceof MyPromise) { 
  4.     x.then(resolve, reject);
  5.   } else {
  6.     // 普通值
  7.     resolve(x);
  8.   }
  9. }

then 中修改如下

  1.   then(successCallback, failCallback) {
  2.     let promise2 = new MyPromise((resolve, reject) => {
  3.       if (this.status === RESOLVED) {
  4.         let x = successCallback(this.value);
  5.         // 调用resolvePromise
  6.         resolvePromise(x, resolve, reject)
  7.       } else if (this.status === REJECTED) {
  8.         failCallback(this.reason);
  9.       } else {
  10.         this.successCallback.push(successCallback);
  11.         this.failCallback.push(failCallback);
  12.       }
  13.     });
  14.     return promise2;
  15.   }

特殊循环调用

在特殊情况下，可以让return的promise 为自身，这就会导致循环调用。
eg:

  1. let promise = new Promise((resolve, reject) => {
  2.   resolve("成功");
  3. });
  4. let promise2 = promise
  5.   .then((value) => {
  6.     console.log(1, value);
  7.     return promise2;
  8.   })

结果如下
image.png
因此我们需要判断 return 的内容是否为 自身。
修改如下

  2. class MyPromise {
  4.     ....
  6.   then(successCallback, failCallback) {
  7.     let promise2 = new MyPromise((resolve, reject) => {
  8.       if (this.status === RESOLVED) {
  9.         let x = successCallback(this.value);
  10.         // 将promise2 自身传进去做判断
  11.         resolvePromise(promise2, x, resolve, reject)
  12.       } else if (this.status === REJECTED) {
  13.         failCallback(this.reason);
  14.       } else {
  15.         this.successCallback.push(successCallback);
  16.         this.failCallback.push(failCallback);
  17.       }
  18.     });
  19.     return promise2;
  20.   }
  21. }
  23. function resolvePromise (promise2, x, resolve, reject) {
  24.   // 加上判断是否为自身, 如果是reject一个错误。
  25.   if(promise2 === x) {
  26.     return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  27.   }
  28.  if (x instanceof MyPromise) { 
  29.    x.then(resolve, reject);
  30.  } else {
  31.    resolve(x);
  32.  }
  33. }

但这由有一个新的问题，在resolvePromise传值的时候，promise 是还没有拿到的。 我们需要怎么做呢

  • 处理成异步

因此我们只要加个settime即可。

  1. class MyPromise {
  3.  。。。
  5.   then(successCallback, failCallback) {
  6.     let promise2 = new MyPromise((resolve, reject) => {
  7.       if (this.status === RESOLVED) {
  8.         // 添加setTimeout, 使其异步化
  9.         setTimeout(() => {
  10.           let x = successCallback(this.value);
  11.           resolvePromise(promise2, x, resolve, reject);
  12.         }, 0);
  13.       } else if (this.status === REJECTED) {
  14.         failCallback(this.reason);
  15.       } else {
  16.         this.successCallback.push(successCallback);
  17.         this.failCallback.push(failCallback);
  18.       }
  19.     });
  20.     return promise2;
  21.   }
  22. }

捕获错误

截至至目前，我们都在处理正常的情况，我们需要添加相应的错误兼容，已保证代码的正常执行。

  • 添加try catch

    1. class MyPromise {
    2. constructor(executor) {
    3. // 添加try catch 
    4. try {
    5.  executor(this.resolve, this.reject);
    6. } catch (error) {
    7.  // 将错误reject 出去
    8.  this.reject(error)
    9. }
    10. }
    12. ....
    14. then(successCallback, failCallback) {
    15. let promise2 = new MyPromise((resolve, reject) => {
    16.  if (this.status === RESOLVED) {
    17.    setTimeout(() => {
    18.      // 添加try catch
    19.      try {
    20.        let x = successCallback(this.value);
    21.        resolvePromise(promise2, x, resolve, reject);
    22.      } catch (error) {
    23.        reject(error)
    24.      }
    25.    }, 0);
    26.  } else if (this.status === REJECTED) {
    27.    failCallback(this.reason);
    28.  } else {
    29.    this.successCallback.push(successCallback);
    30.    this.failCallback.push(failCallback);
    31.  }
    32. });
    33. return promise2;
    34. }
    35. }

    补充其他状态的处理

    目前，我们只是处理的resolve 的状态，我们继续添加reject 状态的代码

    1. class MyPromise {
    3. ...
    5. then(successCallback, failCallback) {
    6. let promise2 = new MyPromise((resolve, reject) => {
    7.  if (this.status === RESOLVED) {
    8.    setTimeout(() => {
    9.      try {
    10.        let x = successCallback(this.value);
    11.        resolvePromise(promise2, x, resolve, reject);
    12.      } catch (error) {
    13.        reject(error)
    14.      }
    15.    }, 0);
    16.  } else if (this.status === REJECTED) {
    17.    setTimeout(() => {
    18.      // 添加 try catch
    19.      try {
    20.        let x = failCallback(this.reason)
    21.        resolvePromise(promise2, x, resolve, reject);
    22.      } catch (error) {
    23.        reject(error)
    24.      }
    25.    }, 0);
    26.  } else {
    27.    this.successCallback.push(successCallback);
    28.    this.failCallback.push(failCallback);
    29.  }
    30. });
    31. return promise2;
    32. }
    33. }

    异步处理

    结合前面成功 和 失败的 处理， 我们还需要对异步的回调函数处理

    1. class MyPromise {
    2. constructor(executor) {
    3. try {
    4.  executor(this.resolve, this.reject);
    5. } catch (error) {
    6.  this.reject(error)
    7. }
    8. }
    9. status = PENDING;
    10. value = undefined;
    11. reason = undefined;
    12. successCallback = [];
    13. failCallback = [];
    15. resolve = (value) => {
    16. if (this.status !== PENDING) return;
    17. this.status = RESOLVED;
    18. this.value = value;
    19. // 不再需要传值
    20. // while (this.successCallback.length) this.successCallback.shift()(this.value);
    21. while (this.successCallback.length) this.successCallback.shift()();
    23. };
    25. reject = (reason) => {
    26. if (this.status !== PENDING) return;
    27. this.status = REJECTED;
    28. this.reason = reason;
    29. // 不再需要传值
    30. // while (this.failCallback.length) this.failCallback.shift()(this.reason);
    31. while (this.failCallback.length) this.failCallback.shift()();
    32. };
    34. then(successCallback, failCallback) {
    35. let promise2 = new MyPromise((resolve, reject) => {
    36.  if (this.status === RESOLVED) {
    37.    setTimeout(() => {
    38.      try {
    39.        let x = successCallback(this.value);
    40.        resolvePromise(promise2, x, resolve, reject);
    41.      } catch (error) {
    42.        reject(error)
    43.      }
    44.    }, 0);
    45.  } else if (this.status === REJECTED) {
    46.    setTimeout(() => {
    47.      try {
    48.        let x = failCallback(this.reason)
    49.        resolvePromise(promise2, x, resolve, reject);
    50.      } catch (error) {
    51.        reject(error)
    52.      }
    53.    }, 0);
    54.  } else {
    55.    this.successCallback.push(() => {
    56.      // 将成功的函数copy一份放在此
    57.      setTimeout(() => {
    58.        try {
    59.          let x = successCallback(this.value);
    60.          resolvePromise(promise2, x, resolve, reject);
    61.        } catch (error) {
    62.          reject(error)
    63.        }
    64.      }, 0);
    65.    });
    66.    this.failCallback.push(() => {
    67.      // 将失败的函数copy一份放在此
    68.      setTimeout(() => {
    69.        try {
    70.          let x = failCallback(this.reason)
    71.          resolvePromise(promise2, x, resolve, reject);
    72.        } catch (error) {
    73.          reject(error)
    74.        }
    75.      }, 0);
    76.    });
    77.  }
    78. });
    79. return promise2;
    80. }
    81. }

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

    我们先来看一段代码 ```javascript let promise = new Promise((resolve, reject) => { resolve(“成功”); // reject(“失败”); });

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

  1. 再 `then` 中，我们可以选择不传递参数，在最后有参数的地方，拿到一层层传递下来的参数。<br />实际上，上面的代码 等同于 下面的代码
  2. ```javascript
  3. promise
  4.   .then(value => value)
  5.   .then(value => value)
  6.   .then((value) => {
  7.     console.log(value);
  8.   });

因此

  • 判断是否有callback, 有则用，没有则补充

    1. class MyPromise {
    3. ...
    5. then(successCallback, failCallback) {
    6.    // 添加可选参数
    7.   successCallback = successCallback ||  (value => value);
    8.   // 失败的回调需加 throw
    9.   failCallback = failCallback ||  (reason => { throw reason });
    11.   let promise2 = new MyPromise((resolve, reject) => {
    12.     ...
    13.   }
    14.   return promise2;
    15. }
    16. }

    静态方法

    all

    Promise 允许我们将多个promise 执行完后一次性返回， 这就是 all 方法。注意的是，这是个静态方法。以下代码是例子。 特殊的，有一个返回的是 reject， 则其他都不会返回 ```javascript let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(“成功 p1”); }, 2000) });

let p2 = new Promise((resolve, reject) => { resolve(“成功 p2”); });

let p = Promise.all([‘a1’, ‘a2’, p1, p2, ‘c1’]) p.then(res => console.log(res))

  1.  由以上代码可以得知， 
  3. - `all` 传递的是个数组
  4. - 传递元素可以是非promise实例
  6. 实现代码
  7. ```javascript
  8. class MyPromise {
  10.   ...
  12.   // 定义静态方法all
  13.   static all(arr) {
  14.     // 定义一个数组保存结果
  15.     let result = [];
  16.     // 保存一个index 和 数组长度判断是否执行
  17.     let index = 0;
  18.     return new MyPromise((resolve, reject) => {
  19.       function addData(key, value) {
  20.         // 保存结果值
  21.         result[key] = value;
  22.         // 每次+1
  23.         index++;
  24.         // 判断是否执行
  25.         if (index === arr.length) {
  26.           resolve(result);
  27.         }
  28.       }
  30.       for (let idx = 0; idx < arr.length; idx++) {
  31.         const current = arr[idx];
  32.         // 判断是否是MyPromise 实例下的
  33.         if (current instanceof MyPromise) {
  34.           // 将then 中的结果放入 结果数组
  35.           current.then(
  36.             (value) => addData(idx, value),
  37.             (reason) => reject(reason)
  38.           );
  39.         } else {
  40.           // 如果不是直接add进结果数组
  41.           addData(idx, current);
  42.         }
  43.       }
  44.     });
  45.   }
  46. }

resolve

resolve 可以将传进来的参数变成一个promise. 让后续也可以链式调用。 例子如下

  1. function p1() {
  2.  return new Promise((resolve, reject) => {
  3.     setTimeout(() => {
  4.       resolve("成功 p1");
  5.     }, 2000);
  6.   });
  7. }
  9. Promise.resolve(10).then((res) => console.log(res));
  10. Promise.resolve(p1()).then((res) => console.log(res));

log如下
image.png
其实很简单。

  • 判断是否是 Promise实例，如果是直接 返回

  • 不是 resolve出去

    1. class MyPromise {
    3. ...
    4. // 定义静态方法resolve
    5. static resolve (value) {
    6.   // 如果是Promise实例，直接返回
    7.   if (value instanceof MyPromise) return value;
    8.   // 不是则resolve 出去
    9.   return new MyPromise(resolve => resolve(value));
    10. }
    11. }

    finally

    我们知道 finally, 无论如何都可以调用 。我们先来复习看下例子是如何用的

  1. let p1 = new Promise((resolve, reject) => {
  2.   console.log('.....');
  3.   resolve("成功 p1");
  4. });
  6. p1.then((res) => console.log(res)).finally(() => {
  7.   console.log("----1");
  8. });
  9. p1.finally(() => {
  10.   console.log("----2");
  11. }).then((res) => console.log(res))

log 如下
image.png
我们可以发现

  • finally 可以放在如何位置 按顺序执行
  • finally 放前面 后面接 then 是可以拿到 返回的值
  • 需要注意的是，这里有微任务宏任务的概念。 then 后面接 finally 或者 finally 后面接then 都是第二次微任务。
  • 需要考虑finally 在前面，返回的value 是异步的情况。

代码如下

  1. class MyPromise {
  3.   ...
  5.   finally(callback) {
  6.     // 因为可以链式调用，我们需要返回一个promise， 直接调用.then 方法既可。
  7.     return this.then(value => {
  8.       // 如果 return 的是个promise 需要等待执行完再return 
  9.       return MyPromise.resolve(callback()).then(() => value)
  10.     }, reason => {
  11.       return MyPromise.resolve(callback()).then(() => { throw reason })
  12.     })
  13.   }
  14. }

catch

话不多说，先看例子

  1. let p1 = new Promise((resolve, reject) => {
  2.   reject('失败回调')
  3. });
  5. p1.then((res) => console.log(res))
  6. .catch(err => {
  7.   console.log(err);
  8. })

log 如下；
image.png
我们可以发现

  • then不传递 失败回调时，是可以在 catch 中捕获到的。

其实实现很简单，只需要将callback放入then(undefind, callback ) 既可
代码实现如下

  1. class MyPromise {
  3.   ...
  5.   catch (failCallback) {
  6.     return this.then(undefined, failCallback)
  7.   }
  9. }

结束

自此，已完成全部逻辑。下面是代码总览

  1. const PENDING = 'pending'; // 等待
  2. const FULFILLED = 'fulfilled'; // 成功
  3. const REJECTED = 'rejected'; // 失败
  5. class MyPromise {
  6.   constructor (executor) {
  7.     try {
  8.       executor(this.resolve, this.reject)
  9.     } catch (e) {
  10.       this.reject(e);
  11.     }
  12.   }
  13.   // promsie 状态 
  14.   status = PENDING;
  15.   // 成功之后的值
  16.   value = undefined;
  17.   // 失败后的原因
  18.   reason = undefined;
  19.   // 成功回调
  20.   successCallback = [];
  21.   // 失败回调
  22.   failCallback = [];
  24.   resolve = value => {
  25.     // 如果状态不是等待 阻止程序向下执行
  26.     if (this.status !== PENDING) return;
  27.     // 将状态更改为成功
  28.     this.status = FULFILLED;
  29.     // 保存成功之后的值
  30.     this.value = value;
  31.     // 判断成功回调是否存在 如果存在 调用
  32.     while(this.successCallback.length) this.successCallback.shift()()
  33.   }
  35.   reject = reason => {
  36.     // 如果状态不是等待 阻止程序向下执行
  37.     if (this.status !== PENDING) return;
  38.     // 将状态更改为失败
  39.     this.status = REJECTED;
  40.     // 保存失败后的原因
  41.     this.reason = reason;
  42.     // 判断失败回调是否存在 如果存在 调用
  43.     while(this.failCallback.length) this.failCallback.shift()()
  44.   }
  46.   then (successCallback, failCallback) {
  47.      // 添加可选参数
  48.     successCallback = successCallback ||  (value => value);
  49.     // 失败的回调需加 throw
  50.     failCallback = failCallback ||  (reason => { throw reason });
  52.     let promsie2 = new MyPromise((resolve, reject) => {
  53.       // 判断状态
  54.       if (this.status === FULFILLED) {
  55.         setTimeout(() => {
  56.           // 添加容错
  57.           try {
  58.             let x = successCallback(this.value);
  59.             resolvePromise(promsie2, x, resolve, reject)
  60.           }catch (e) {
  61.             reject(e);
  62.           }
  63.         }, 0)
  64.       }else if (this.status === REJECTED) {
  65.         setTimeout(() => {
  66.           // 添加容错
  67.           try {
  68.             let x = failCallback(this.reason);
  69.             resolvePromise(promsie2, x, resolve, reject)
  70.           }catch (e) {
  71.             reject(e);
  72.           }
  73.         }, 0)
  74.       } else {
  75.         // 等待
  76.         // 将成功回调和失败回调存储起来
  77.         this.successCallback.push(() => {
  78.           setTimeout(() => {
  79.             try {
  80.               let x = successCallback(this.value);
  81.               resolvePromise(promsie2, x, resolve, reject)
  82.             }catch (e) {
  83.               reject(e);
  84.             }
  85.           }, 0)
  86.         });
  87.         this.failCallback.push(() => {
  88.           setTimeout(() => {
  89.             try {
  90.               let x = failCallback(this.reason);
  91.               resolvePromise(promsie2, x, resolve, reject)
  92.             }catch (e) {
  93.               reject(e);
  94.             }
  95.           }, 0)
  96.         });
  97.       }
  98.     });
  99.     return promsie2;
  100.   }
  102.   finally(callback) {
  103.     // 因为可以链式调用，我们需要返回一个promise， 直接调用.then 方法既可。
  104.     return this.then(value => {
  105.       // 如果 return 的是个promise 需要等待执行完再return 
  106.       return MyPromise.resolve(callback()).then(() => value)
  107.     }, reason => {
  108.       return MyPromise.resolve(callback()).then(() => { throw reason })
  109.     })
  110.   }
  112.   catch (failCallback) {
  113.     return this.then(undefined, failCallback)
  114.   }
  116.   // 定义静态方法all
  117.   static all(arr) {
  118.     // 定义一个数组保存结果
  119.     let result = [];
  120.     // 保存一个index 和 数组长度判断是否执行
  121.     let index = 0;
  122.     return new MyPromise((resolve, reject) => {
  123.       function addData(key, value) {
  124.         // 保存结果值
  125.         result[key] = value;
  126.         // 每次+1
  127.         index++;
  128.         // 判断是否执行
  129.         if (index === arr.length) {
  130.           resolve(result);
  131.         }
  132.       }
  134.       for (let idx = 0; idx < arr.length; idx++) {
  135.         const current = arr[idx];
  136.         // 判断是否是MyPromise 实例下的
  137.         if (current instanceof MyPromise) {
  138.           // 将then 中的结果放入 结果数组
  139.           current.then(
  140.             (value) => addData(idx, value),
  141.             (reason) => reject(reason)
  142.           );
  143.         } else {
  144.           // 如果不是直接add进结果数组
  145.           addData(idx, current);
  146.         }
  147.       }
  148.     });
  149.   }
  151.   // 定义静态方法resolve
  152.   static resolve (value) {
  153.     // 如果是Promise实例，直接返回
  154.     if (value instanceof MyPromise) return value;
  155.     // 不是则resolve 出去
  156.     return new MyPromise(resolve => resolve(value));
  157.   }
  158. }
  161. // 判断 x 的值是普通值还是promise对象
  162. // 如果是普通值 直接调用resolve 
  163. // 如果是promise对象 查看promsie对象返回的结果 
  164. // 再根据promise对象返回的结果 决定调用resolve 还是调用reject
  165. function resolvePromise (promsie2, x, resolve, reject) {
  166.   if (promsie2 === x) {
  167.     return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  168.   }
  169.   if (x instanceof MyPromise) {
  170.     // promise 对象
  171.     // x.then(value => resolve(value), reason => reject(reason));
  172.     x.then(resolve, reject);
  173.   } else {
  174.     // 普通值
  175.     resolve(x);
  176.   }
  177. }