Promise链式调用的原理

Promise链式调用, 不仅中工作中经常用到, 面试中也有时会被问到, 如果搞懂它, 对我们工作面试都会有帮助.

其实它的原理很简单, 就是因为then方法也会返回一个新的Promise, 然后这个Promise会根据它接收的参数,来决定状态, 如果接收到的不是一个Promise, 那么它就自动置为fullfill, 如果接收到的参数是Promise, 那么就将它的resolve函数放在接收到的Promise中的then方法执行, 所以就保证了只有接收到的参数的那个Promise执行完, 返回的的Promise才会执行,也就形成链式调用的过程, 具体代码如下:

  then(onFulfilled?, onRejected?) {
    const { _value, _status } = this;
    // 返回一个新的Promise对象
    return new Promise((onFulfilledNext, onRejectedNext) => {
      // 封装一个成功时执行的函数
      const fulfilled = value => {
        try {
          if (!isFunction(onFulfilled)) {
            onFulfilledNext(value);
          } else {
            const res = onFulfilled(value);
            if (res instanceof Promise) {
              // 如果当前回调函数返回Promise对象，必须等待其状态改变后在执行下一个回调
              res.then(onFulfilledNext, onRejectedNext);
            } else {
              //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
              onFulfilledNext(res);
            }
          }
        } catch (err) {
          // 如果函数执行出错，新的Promise对象的状态为失败
          onRejectedNext(err);
        }
      };