从0到1实现Promise

85403263

2019-06-28

前言

Promise大家一定都不陌生了，JavaScript异步流程从最初的Callback，到Promise，到Generator，再到目前使用最多的Async/Await（如果对于这些不熟悉的可以参考我另一篇文章《JavaScript异步编程》），这不仅仅是技术实现的发展，更是思想上对于如何控制异步的递进。Promise作为后续方案的基础，是重中之重，也是面试时候最常被问到的。

今天我们就一起从0到1实现一个基于A+规范的Promise，过程中也会对Promise的异常处理，以及是否可手动终止做一些讨论，最后会对我们实现的Promise做单元测试。完整的代码已经上传到github，想直接看代码的可以点这里。

虽然已经有很多带你实现Promise类的文章了，但每个人理解的程度不一样，也许不同的文章可以带给你不同的思考呢，那我们就开始吧。

正文

1. 基础框架

new Promise()时接收一个executor函数作为参数，该函数会立即执行，函数中有两个参数，它们也是函数，分别是resolve和reject，函数同步执行一定要放在try...catch中，否则无法进行错误捕获。

MyPromise.js

function MyPromise(executor) {

  function resolve(value) {

  }

  function reject(reason) {
    
  }

  try {
    executor(resolve, reject);
  } catch (reason) {
    reject(reason);
  }
}

module.exports = MyPromise;

resolve()接收Promise成功值value，reject接收Promise失败原因reason。

test.js

let MyPromise = require('./MyPromise.js');

let promise = new MyPromise(function(resolve, reject) {
  resolve(123);
})

2. 添加状态机

目前实现存在的问题：

Promise是一个状态机的机制，初始状态为 pending，成功状态为 fulfilled，失败状态为 rejected。只能从 pending -> fulfilled，或者从 pending -> rejected，并且状态一旦转变，就永远不会再变了。

所以，我们需要为Promise添加一个状态流转的机制。

MyPromise.js

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

function MyPromise(executor) {
  let self = this;
  self.state = PENDING;


  function resolve(value) {
    if (self.state === PENDING) {
      self.state = FULFILLED;
    }
  }

  function reject(reason) {
    if (self.state === PENDING) {
      self.state = REJECTED;
    }
  }

  try {
    executor(resolve, reject);
  } catch (reason) {
    reject(reason);
  }
}

module.exports = MyPromise;

test.js

let MyPromise = require('./MyPromise.js');

let promise = new MyPromise(function(resolve, reject) {
  resolve(123);
});

promise.then(function(value) {
  console.log('value', value);
}, function(reason) {
  console.log('reason', reason);
})

3. 添加`then`方法

Promise拥有一个then方法，接收两个函数 onFulfilled 和 onRejected，分别作为Promise成功和失败的回调。所以，在then方法中我们需要对状态state进行判断，如果是fulfilled，则执行onFulfilled(value)方法，如果是rejected，则执行onRejected(reason)方法。

由于成功值value和失败原因reason是由用户在executor中通过resolve(value) 和 reject(reason)传入的，所以我们需要有一个全局的value和reason供后续方法获取。

MyPromise.js

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

function MyPromise(executor) {
  let self = this;

  self.state = PENDING;
  self.value = null;
  self.reason = null;

  function resolve(value) {
    if (self.state === PENDING) {
      self.state = FULFILLED;
      self.value = value;
    }
  }

  function reject(reason) {
    if (self.state === PENDING) {
      self.state = REJECTED;
      self.reason = reason;
    }
  }

  try {
    executor(resolve, reject);
  } catch (reason) {
    reject(reason);
  }
}

MyPromise.prototype.then = function(onFuifilled, onRejected) {
  let self = this;

  if (self.state === FULFILLED) {
    onFuifilled(self.value);
  }

  if (self.state === REJECTED) {
    onRejected(self.reason);
  }
};

module.exports = MyPromise;

4. 实现异步调用resolve

目前实现存在的问题：

同步调用resolve()没有问题，但如果是异步调用，比如放到setTimeout中，因为目前的代码在调用then()方法时，state仍是pending状态，当timer到时候调用resolve()把state修改为fulfilled状态，但是onFulfilled()函数已经没有时机调用了。

针对上述问题，进行如下修改：

MyPromise.js

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

function MyPromise(executor) {
  let self = this;

  self.state = PENDING;
  self.value = null;
  self.reason = null;
  self.onFulfilledCallbacks = [];
  self.onRejectedCallbacks = [];

  function resolve(value) {
    if (self.state === PENDING) {
      self.state = FULFILLED;
      self.value = value;

      self.onFulfilledCallbacks.forEach(function(fulfilledCallback) {
        fulfilledCallback();
      });
    }
  }

  function reject(reason) {
    if (self.state === PENDING) {
      self.state = REJECTED;
      self.reason = reason;

      self.onRejectedCallbacks.forEach(function(rejectedCallback) {
        rejectedCallback();
      });
    }
  }

  try {
    executor(resolve, reject);
  } catch (reason) {
    reject(reason);
  }
}

MyPromise.prototype.then = function(onFuifilled, onRejected) {
  let self = this;

  if (self.state === PENDING) {
    self.onFulfilledCallbacks.push(() => {
        onFuifilled(self.value);
    });
    self.onRejectedCallbacks.push(() => {
        onRejected(self.reason);
    });
  }

  if (self.state === FULFILLED) {
    onFuifilled(self.value);
  }

  if (self.state === REJECTED) {
    onRejected(self.reason);
  }
};

module.exports = MyPromise;

我们添加了两个回调函数数组onFulfilledCallbacks和onRejectedCallbacks，用来存储then()方法中传入的成功和失败回调。然后，当用户调用resolve()或reject()的时候，修改state状态，并从相应的回调数组中依次取出回调函数执行。

同时，通过这种方式我们也实现了可以注册多个then()函数，并且在成功或者失败时按照注册顺序依次执行。

test.js

let MyPromise = require('./MyPromise.js');

let promise = new MyPromise(function(resolve, reject) {
  setTimeout(function() {
    resolve(123);
  }, 1000);
});

promise.then(function(value) {
  console.log('value1', value);
}, function(reason) {
  console.log('reason1', reason);
});

promise.then(function(value) {
  console.log('value2', value);
}, function(reason) {
  console.log('reason2', reason);
});

5. then返回的仍是Promise

读过PromiseA+规范的同学肯定知道，then()方法返回的仍是一个Promise，并且返回Promise的resolve的值是上一个Promise的onFulfilled()函数或onRejected()函数的返回值。如果在上一个Promise的then()方法回调函数的执行过程中发生了错误，那么会将其捕获到，并作为返回的Promise的onRejected函数的参数传入。比如：

let promise = new Promise((resolve, reject) => {
  resolve(123);
});

promise.then((value) => {
  console.log('value1', value);
  return 456;
}).then((value) => {
  console.log('value2', value);
});

let promise = new Promise((resolve, reject) => {
  resolve(123);
});

打印结果为：

value1 123
value2 456

let promise = new Promise((resolve, reject) => {
  resolve(123);
});

promise.then((value) => {
  console.log('value1', value);
  a.b = 2;    // 这里存在语法错误
  return 456;
}).then((value) => {
  console.log('value2', value);
}, (reason) => {
  console.log('reason2', reason);
});

打印结果为：

value1 123
reason2 ReferenceError: a is not defined

可以看到，then()方法回调函数如果发生错误，会被捕获到，那么then()返回的Promise会自动变为onRejected，执行onRejected()回调函数。

let promise = new Promise((resolve, reject) => {
  reject(123);
});

promise.then((value) => {
  console.log('value1', value);
  return 456;
}, (reason) => {
  console.log('reason1', reason);
  return 456;
}).then((value) => {
  console.log('value2', value);
}, (reason) => {
  console.log('reason2', reason);
});

打印结果为：

reason1 123
value2 456

好啦，接下来我们就去实现then()方法依然返回一个Promise。

MyPromise.js

MyPromise.prototype.then = function(onFuifilled, onRejected) {
  let self = this;
  let promise2 = null;

  promise2 = new MyPromise((resolve, reject) => {
    if (self.state === PENDING) {
      self.onFulfilledCallbacks.push(() => {
        try {
          let x = onFuifilled(self.value);
          self.resolvePromise(promise2, x, resolve, reject);
        } catch(reason) {
          reject(reason);
        }
      });
      self.onRejectedCallbacks.push(() => {
        try {
          let x = onRejected(self.reason);
          self.resolvePromise(promise2, x, resolve, reject);
        } catch(reason) {
          reject(reason);
        }
      });
    }
  
    if (self.state === FULFILLED) {
      try {
        let x = onFuifilled(self.value);
        self.resolvePromise(promise2, x, resolve, reject);
      } catch (reason) {
        reject(reason);
      }
    }
  
    if (self.state === REJECTED) {
      try {
        let x = onRejected(self.reason);
        self.resolvePromise(promise2, x, resolve, reject);
      } catch (reason) {
        reject(reason);
      }
    }
  });

  return promise2;
};

可以看到，我们新增了一个promise2作为then()方法的返回值。通过let x = onFuifilled(self.value) 或者 let x = onRejected(self.reason)拿到then()方法回调函数的返回值，然后调用self.resolvePromise(promise2, x, resolve, reject)，将新增的promise2、x、promise2的resolve和reject传入到resolvePromise()中。

所以，下面我们重点看一下resolvePromise()方法。

MyPromise.js

MyPromise.prototype.resolvePromise = function(promise2, x, resolve, reject) {
  let self = this;
  let called = false;   // called 防止多次调用

  if (promise2 === x) {
    return reject(new TypeError('循环引用'));
  }

  if (x !== null && (Object.prototype.toString.call(x) === '[object Object]' || Object.prototype.toString.call(x) === '[object Function]')) {
    // x是对象或者函数
    try {
      let then = x.then;

      if (typeof then === 'function') {
        then.call(x, (y) => {
          // 别人的Promise的then方法可能设置了getter等，使用called防止多次调用then方法
          if (called) return ;
          called = true;
          // 成功值y有可能还是promise或者是具有then方法等，再次resolvePromise，直到成功值为基本类型或者非thenable
          self.resolvePromise(promise2, y, resolve, reject);
        }, (reason) => {
          if (called) return ;
          called = true;
          reject(reason);
        });
      } else {
        if (called) return ;
        called = true;
        resolve(x);
      }
    } catch (reason) {
      if (called) return ;
      called = true;
      reject(reason);
    }
  } else {
    // x是普通值，直接resolve
    resolve(x);
  }
};

resolvePromise()是用来解析then()回调函数中返回的仍是一个Promise，这个Promise有可能是我们自己的，有可能是别的库实现的，也有可能是一个具有then()方法的对象，所以这里靠resolvePromise()来实现统一处理。

下面是翻译自PromiseA+规范关于resolvePromise()的要求：

Promise 解决过程

Promise 解决过程是一个抽象的操作，其需输入一个 promise 和一个值，我们表示为 [[Resolve]](promise, x)，如果 x 有 then 方法且看上去像一个 Promise ，解决程序即尝试使 promise 接受 x 的状态；否则其用 x 的值来执行 promise 。

这种 thenable 的特性使得 Promise 的实现更具有通用性：只要其暴露出一个遵循 Promise/A+ 协议的 then 方法即可；这同时也使遵循 Promise/A+ 规范的实现可以与那些不太规范但可用的实现能良好共存。

运行 [[Resolve]](promise, x) 需遵循以下步骤：

x 与 promise 相等

如果 promise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 promise

x 为 Promise

如果 x 为 Promise ，则使 promise 接受 x 的状态:

- 如果 x 处于等待态， promise 需保持为等待态直至 x 被执行或拒绝
- 如果 x 处于执行态，用相同的值执行 promise
- 如果 x 处于拒绝态，用相同的据因拒绝 promise

x 为对象或函数

如果 x 为对象或者函数：

- 把 x.then 赋值给 then
- 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
- 如果 then 是函数，将 x 作为函数的作用域 this 调用之。传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise:
    - 如果 resolvePromise 以值 y 为参数被调用，则运行 [[Resolve]](promise, y)
    - 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
    - 如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用
    - 如果调用 then 方法抛出了异常 e：
        - 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
        - 否则以 e 为据因拒绝 promise
    - 如果 then 不是函数，以 x 为参数执行 promise
- 如果 x 不为对象或者函数，以 x 为参数执行 promise

如果一个 promise 被一个循环的 thenable 链中的对象解决，而 [[Resolve]](promise, thenable) 的递归性质又使得其被再次调用，根据上述的算法将会陷入无限递归之中。算法虽不强制要求，但也鼓励施者检测这样的递归是否存在，若检测到存在则以一个可识别的 TypeError 为据因来拒绝 promise。

参考上述规范，结合代码中的注释，相信大家可以理解resolvePromise()的作用了。

测试：

test.js

let MyPromise = require('./MyPromise.js');

let promise = new MyPromise(function(resolve, reject) {
  setTimeout(function() {
    resolve(123);
  }, 1000);
});

promise.then((value) => {
  console.log('value1', value);
  return new MyPromise((resolve, reject) => {
    resolve(456);
  }).then((value) => {
    return new MyPromise((resolve, reject) => {
      resolve(789);
    })
  });
}, (reason) => {
  console.log('reason1', reason);
}).then((value) => {
  console.log('value2', value);
}, (reason) => {
  console.log('reason2', reason);
});

打印结果：

value1 123
value2 789

6. 让`then()`方法的回调函数总是异步调用

官方Promise实现的回调函数总是异步调用的：

console.log('start');

let promise = new Promise((resolve, reject) => {
  console.log('step-');
  resolve(123);
});

promise.then((value) => {
  console.log('step--');
  console.log('value', value);
});

console.log('end');

打印结果：

start
step-
end
step--
value1 123

Promise属于微任务，这里我们为了方便用宏任务setTiemout来代替实现异步，具体关于宏任务、微任务以及Event Loop可以参考我的另一篇文章带你彻底弄懂Event Loop。

MyPromise.js

MyPromise.prototype.then = function(onFuifilled, onRejected) {
  let self = this;
  let promise2 = null;

  promise2 = new MyPromise((resolve, reject) => {
    if (self.state === PENDING) {
      self.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            let x = onFuifilled(self.value);
            self.resolvePromise(promise2, x, resolve, reject);
          } catch (reason) {
            reject(reason);
          }
        }, 0);
      });
      self.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            let x = onRejected(self.reason);
            self.resolvePromise(promise2, x, resolve, reject);
          } catch (reason) {
            reject(reason);
          }
        }, 0);
      });
    }
  
    if (self.state === FULFILLED) {
      setTimeout(() => {
        try {
          let x = onFuifilled(self.value);
          self.resolvePromise(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      }, 0);
    }
  
    if (self.state === REJECTED) {
      setTimeout(() => {
        try {
          let x = onRejected(self.reason);
          self.resolvePromise(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      }, 0);
    }
  });

  return promise2;
};

测试：

test.js

let MyPromise = require('./MyPromise.js');

console.log('start');

let promise = new MyPromise((resolve, reject) => {
  console.log('step-');
  setTimeout(() => {
    resolve(123);
  }, 1000);
});

promise.then((value) => {
  console.log('step--');
  console.log('value', value);
});

console.log('end');

打印结果：

start
step-
end
step--
value1 123

经过以上步骤，一个最基本的Promise就已经实现完了，下面我们会实现一些不在PromiseA+规范的扩展方法。

7. 实现`catch()`方法

then()方法的onFulfilled和onRejected回调函数都不是必传项，如果不传，那么我们就无法接收reject(reason)中的错误，这时我们可以通过链式调用catch()方法用来接收错误。举例：

let promise = new Promise((resolve, reject) => {
  reject('has error');
});

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

打印结果：

reason has error

不仅如此，catch()可以作为Promise链式调用的最后一步，前面Promise发生的错误会冒泡到最后一个catch()中，从而捕获异常。举例：

let promise = new Promise((resolve, reject) => {
  resolve(123);
});

promise.then((value) => {
  console.log('value', value);
  return new Promise((resolve, reject) => {
    reject('has error1');
  });
}).then((value) => {
  console.log('value', value);
  return new Promise((resolve, reject) => {
    reject('has error2');
  });
}).catch((reason) => {
  console.log('reason', reason);
});

打印结果：

value 123
reason has error1

那么catch()方法到底是如何实现的呢？

答案就是在Promise的实现中，onFulfilled和onRejected函数是有默认值的：

MyPromise.js

MyPromise.prototype.then = function(onFuifilled, onRejected) {
  onFuifilled = typeof onFuifilled === 'function' ? onFuifilled : value => {return value;};
  onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason};
};

MyPromise.prototype.catch = function(onRejected) {
  return this.then(null, onRejected);
};

可以看到，onRejected的默认值是把错误reason通过throw抛出去。由于我们对于同步代码的执行都是在try...catch中的，所以如果Promise发生了错误，如果没传onRejected，默认的函数会把错误reason抛出，然后会被promise2捕捉到，作为reject(reason)决议。

catch()实现就是调用this.then(null, onRejected)，由于promise2被reject，所以会执行onRejected回调，于是就捕捉到了第一个promise的错误。

总结来说，then()方法中不传onRejected回调，Promise内部会默认帮你写一个函数作为回调，作用就是throw抛出reject或者try...catch到的错误，然后错误reason会被promise2作为reject(reason)进行决议，于是会被下一个then()方法的onRejected回调函数调用，而catch只是写了一个特殊的then(null, onRejected)而已。

所以，我们在写Promise的链式调用的时候，在then()中可以不传onRejected回调，只需要在链式调用的最末尾加一个catch()就可以了，这样在该链条中的Promise发生的错误都会被最后的catch捕获到。

举例1：

let promise = new Promise((resolve, reject) => {
  reject(123);
});

promise.then((value) => {
  // 注意，不会走这里，因为第一个promise是被reject的
  console.log('value1', value);
  return new Promise((resolve, reject) => {
    reject('has error1');
  });
}).then((value) => {
  console.log('value2', value);
  return new Promise((resolve, reject) => {
    reject('has error2');
  });
}, (reason) => {
  // 注意，这个then有onRejected回调
  console.log('reason2', reason);
}).catch((reason) => {
  // 错误在上一个then就被捕获了，所以不会走到这里
  console.log('reason3', reason);
});

打印结果：

reason2 123

举例2：

let promise = new Promise((resolve, reject) => {
  reject(123);
});

promise.then((value) => {
  console.log('value1', value);
  return new Promise((resolve, reject) => {
    reject('has error1');
  });
}).then((value) => {
  console.log('value2', value);
  return new Promise((resolve, reject) => {
    reject('has error2');
  });
}).catch((reason) => {
  // 由于链条中的then都没有onRejected回调，所以会一直被冒泡到最后的catch这里
  console.log('reason3', reason);
});

catch和then一样都是返回一个新的Promise。有的同学可能会有疑问，如果catch中的回调执行也发生错误该怎么办呢，这个我们后续在Promise异常处理中再做讨论。

打印结果：

reason3 123

8. 实现`finally`方法

finally是某些库对Promise实现的一个扩展方法，无论是resolve还是reject，都会走finally方法。

MyPromise.js

MyPromise.prototype.finally = function(fn) {
    return this.then(value => {
       fn();
       return value;
    }, reason => {
        fn();
        throw reason;
    });
};

9. 实现`done`方法

done方法作为Promise链式调用的最后一步，用来向全局抛出没有被Promise内部捕获的错误，并且不再返回一个Promise。一般用来结束一个Promise链。

MyPromise.js

MyPromise.prototype.done = function() {
    this.catch(reason => {
        console.log('done', reason);
        throw reason;
    });
};

10. 实现`Promise.all`方法

Promise.all()接收一个包含多个Promise的数组，当所有Promise均为fulfilled状态时，返回一个结果数组，数组中结果的顺序和传入的Promise顺序一一对应。如果有一个Promise为rejected状态，则整个Promise.all为rejected。

MyPromise.js

MyPromise.all = function(promiseArr) {
  return new MyPromise((resolve, reject) => {
    let result = [];

    promiseArr.forEach((promise, index) => {
      promise.then((value) => {
        result[index] = value;

        if (result.length === promiseArr.length) {
          resolve(result);
        }
      }, reject);
    });
  });
};

test.js

let MyPromise = require('./MyPromise.js');

let promise1 = new MyPromise((resolve, reject) => {
  console.log('aaaa');
  setTimeout(() => {
    resolve(1111);
    console.log(1111);
  }, 1000);
});

let promise2 = new MyPromise((resolve, reject) => {
  console.log('bbbb');
  setTimeout(() => {
    reject(2222);
    console.log(2222);
  }, 2000);
});

let promise3 = new MyPromise((resolve, reject) => {
  console.log('cccc');
  setTimeout(() => {
    resolve(3333);
    console.log(3333);
  }, 3000);
});

Promise.all([promise1, promise2, promise3]).then((value) => {
  console.log('all value', value);
}, (reason) => {
  console.log('all reason', reason);
})

打印结果：

aaaa
bbbb
cccc
1111
2222
all reason 2222
3333

11. 实现`Promise.race`方法

Promise.race()接收一个包含多个Promise的数组，当有一个Promise为fulfilled状态时，整个大的Promise为onFulfilled，并执行onFulfilled回调函数。如果有一个Promise为rejected状态，则整个Promise.race为rejected。

MyPromise.js

MyPromise.race = function(promiseArr) {
  return new MyPromise((resolve, reject) => {
    promiseArr.forEach(promise => {
      promise.then((value) => {
        resolve(value);   
      }, reject);
    });
  });
};

test.js

let MyPromise = require('./MyPromise.js');

let promise1 = new MyPromise((resolve, reject) => {
  console.log('aaaa');
  setTimeout(() => {
    resolve(1111);
    console.log(1111);
  }, 1000);
});

let promise2 = new MyPromise((resolve, reject) => {
  console.log('bbbb');
  setTimeout(() => {
    reject(2222);
    console.log(2222);
  }, 2000);
});

let promise3 = new MyPromise((resolve, reject) => {
  console.log('cccc');
  setTimeout(() => {
    resolve(3333);
    console.log(3333);
  }, 3000);
});

Promise.race([promise1, promise2, promise3]).then((value) => {
  console.log('all value', value);
}, (reason) => {
  console.log('all reason', reason);
})

打印结果：

aaaa
bbbb
cccc
1111
all reason 1111
2222
3333

12. 实现`Promise.resolve`方法

Promise.resolve用来生成一个fulfilled完成态的Promise，一般放在整个Promise链的开头，用来开始一个Promise链。

MyPromise.js

MyPromise.resolve = function(value) {
  let promise;

  promise = new MyPromise((resolve, reject) => {
    this.prototype.resolvePromise(promise, value, resolve, reject);
  });

  return promise;
};

test.js

let MyPromise = require('./MyPromise.js');

MyPromise.resolve(1111).then((value) => {
  console.log('value1', value);
  return new MyPromise((resolve, reject) => {
    resolve(2222);
  })
}).then((value) => {
  console.log('value2', value);
})

打印结果：

value1 1111
value2 2222

由于传入的value有可能是普通值，有可能是thenable，也有可能是另一个Promise，所以调用resolvePromise进行解析。

12. 实现`Promise.reject`方法

Promise.reject用来生成一个rejected失败态的Promise。

MyPromise.js

MyPromise.reject = function(reason) {
  return new MyPromise((resolve, reject) => {
    reject(reason);
  });
};

test.js

let MyPromise = require('./MyPromise.js');

MyPromise.reject(1111).then((value) => {
  console.log('value1', value);
  return new MyPromise((resolve, reject) => {
    resolve(2222);
  })
}).then((value) => {
  console.log('value2', value);
}).catch(reason => {
  console.log('reason', reason);
});

打印结果：

reason 1111

13. 实现`Promise.deferred`方法

Promise.deferred可以用来延迟执行resolve和reject。

MyPromise.js

MyPromise.deferred = function() {
    let dfd = {};
    dfd.promies = new MyPromise((resolve, reject) => {
      dfd.resolve = resolve;
      dfd.rfeject = reject;
    });
    return dfd;
};

这样，你就可以在外部通过调用dfd.resolve()和dfd.reject()来决议该Promise。

13. 如何停止一个`Promise`链

假设这样一个场景，我们有一个很长的Promise链式调用，这些Promise是依次依赖的关系，如果链条中的某个Promise出错了，就不需要再向下执行了，默认情况下，我们是无法实现这个需求的，因为Promise无论是then还是catch都会返回一个Promise，都会继续向下执行then或catch。举例：

new Promise(function(resolve, reject) {
  resolve(1111)
}).then(function(value) {
  // "ERROR!!!"
}).catch()
  .then()
  .then()
  .catch()
  .then()

有没有办法让这个链式调用在ERROR!!!的后面就停掉，完全不去执行链式调用后面所有回调函数呢？

我们自己封装一个Promise.stop方法。

MyPromise.js

MyPromise.stop = function() {
  return new Promise(function() {});
};

stop中返回一个永远不执行resolve或者reject的Promise，那么这个Promise永远处于pending状态，所以永远也不会向下执行then或catch了。这样我们就停止了一个Promise链。

new MyPromise(function(resolve, reject) {
  resolve(1111)
}).then(function(value) {
  // "ERROR!!!"
  MyPromise.stop();
}).catch()
  .then()
  .then()
  .catch()
  .then()

但是这样会有一个缺点，就是链式调用后面的所有回调函数都无法被垃圾回收器回收。

14. 如何解决`Promise`链上返回的最后一个`Promise`出现错误

看如下例子：

new Promise(function(resolve) {
  resolve(42)
}).then(function(value) {
  a.b = 2;
});

这里a不存在，所以给a.b赋值是一个语法错误，onFulfilled回调函数是包在try...catch中执行的，错误会被catch到，但是由于后面没有then或catch了，这个错误无法被处理，就会被Promise吃掉，没有任何异常，这就是常说的Promise有可能会吃掉错误。

那么我们怎么处理这种情况呢？

方法一

就是我们前面已经实现过的done()。

new Promise(function(resolve) {
  resolve(42)
}).then(function(value) {
  a.b = 2;
}).done();

done()方法相当于一个catch，但是却不再返回Promise了，注意done()方法中不能出现语法错误，否则又无法捕获了。

方法二

普通错误监听window的error事件可以实现捕获

window.addEventListener('error', error => {
  console.log(error); // 不会触发
});

Promise没有被onRejected()处理的错误需要监听unhandledrejection事件

window.addEventListener('unhandledrejection', error => {
  console.log('unhandledrejection', error); // 可以触发，而且还可以直接拿到 promise 对象
});

14. 单元测试

结束

相关单元测试以及完整代码可以到我的github查看，如果对你有帮助的话，就来个star吧~

从0到1实现Promise

欢迎关注我的公众号

从0到1实现Promise

参考文档

PromiseA+规范

promise

从0到1实现Promise

前言

正文

1. 基础框架

2. 添加状态机

3. 添加then方法

4. 实现异步调用resolve

5. then返回的仍是Promise

6. 让then()方法的回调函数总是异步调用

7. 实现catch()方法

8. 实现finally方法

9. 实现done方法

10. 实现Promise.all方法

11. 实现Promise.race方法

12. 实现Promise.resolve方法

12. 实现Promise.reject方法

13. 实现Promise.deferred方法

13. 如何停止一个Promise链

14. 如何解决Promise链上返回的最后一个Promise出现错误

14. 单元测试

结束

欢迎关注我的公众号

参考文档

相关推荐

3. 添加`then`方法

6. 让`then()`方法的回调函数总是异步调用

7. 实现`catch()`方法

8. 实现`finally`方法

9. 实现`done`方法

10. 实现`Promise.all`方法

11. 实现`Promise.race`方法

12. 实现`Promise.resolve`方法

12. 实现`Promise.reject`方法

13. 实现`Promise.deferred`方法

13. 如何停止一个`Promise`链

14. 如何解决`Promise`链上返回的最后一个`Promise`出现错误