不了解Promise是什么的可以移步

上节我们实现了Promise方法，本节我们接着上节来实现then方法，本节是关键也是难点哦。

1、then方法

then接收两个参数, onFulfilled 和 onRejected

then(onFulfilled, onRejected) {}

检查并处理参数, 如果不是function 就忽略. 这个忽略指的是返回value或者reason

isFunction(param) {
    return typeof param === 'function';
}
then(onFulfilled, onRejected) {
    const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
        return value;
    }
    const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => {
        throw reason
    };
}

根据当前promise的状态, 调用不同的函数

then(onFulfilled, onRejected) {
    const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
        return value;
    }
    const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => {
        throw reason;
    };
    switch (this.status) {
        case FULFILLED: {
            fulFilledFn(this.value);
            break;
        }
        case REJECTED: {
            rejectedFn(this.reason);
            break;
        }
    }
}

pending状态处理

如果照着上面那么写的话，有以下两个问题：

是在then函数被调用的瞬间就会执行，这时候status或许还没变成fulfilled或者rejected，很有可能是pending状态；
链式调用允许我们多次调用 then，多个 then 中传入的 onResolved（也叫onFulFilled）和 onRejected 任务；

4.1 所以我们首先要拿到所有的回调, 然后才能在某个时机去执行。新建两个数组, 来分别存储成功和失败的回调, 调用then的时候, 如果还是pending就存入数组。

then(onFulfilled, onRejected) {
    const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
        return value;
    }
    const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => {
        throw reason;
    };
    switch (this.status) {
        case FULFILLED: {
            fulFilledFn(this.value);
            break;
        }
        case REJECTED: {
            rejectedFn(this.reason);
            break;
        }
        case PENDING: {
            this.FULFILLED_CALLBACK_LIST.push(realOnFulfilled);
            this.REJECTED_CALLBACK_LIST.push(realOnRejected);
            break;
        }
    }
}

4.2 在status发生变化的时候, 就执行所有的回调. 这里咱们用一下es6的getter和setter。

get status() {
    return this._status;
}
set status(newStatus) {
    switch (newStatus) {
        case FULFILLED: {
            this.FULFILLED_CALLBACK_LIST.forEach(callback => {
                callback(this.value);
            });
            break;
        }
        case REJECTED: {
            this.REJECTED_CALLBACK_LIST.forEach(callback => {
                callback(this.reason);
            });
            break;
        }
    }
}

then的返回值

注意：这块内容比较多，单独拆一下，是重点也是难点；

5.1 链式调用，需要返回promise，所以我们暂时命名为promise2。如果 onFulfilled 或者 onRejected 抛出一个异常 e ，则 promise2 必须拒绝执行，并返回拒绝原因 e。(需要手动catch代码，遇到报错就reject)

then(onFulfilled, onRejected) {
     const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
         return value;
     }
     const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => {
         throw reason;
     };
      // 手动捕获异常
     const fulFilledFnWithCatch = (resolve, reject) => {
         try {
             fulFilledFn(this.value);
         } catch (e) {
             reject(e)
         }
     };
          // 手动捕获异常
     const rejectedFnWithCatch = (resolve, reject) => {
         try {
             rejectedFn(this.reason);
         } catch (e) {
             reject(e);
         }
     }
     switch (this.status) {
         case FULFILLED: {
             // 返回Promise供链式调用
             return new MyPromise(fulFilledFnWithCatch);
         }
         case REJECTED: {
             return new MyPromise(rejectedFnWithCatch);
         }
         case PENDING: {
             return new MyPromise((resolve, reject) => {
                 this.FULFILLED_CALLBACK_LIST.push(() => fulFilledFnWithCatch(resolve, reject));
                 this.REJECTED_CALLBACK_LIST.push(() => rejectedFnWithCatch(resolve, reject));
             });
         }
     }
 }

5.2 如果 onFulfilled 不是函数且 promise1 成功执行， promise2 必须成功执行并返回相同的值。

 const fulFilledFnWithCatch = (resolve, reject) => {
         try {
             fulFilledFn(this.value);
             resolve(this.value);
         } catch (e) {
             reject(e)
         }
     };

5.3 如果 onRejected 不是函数且 promise1 拒绝执行， promise2 必须拒绝执行并返回相同的据因。

需要注意的是，如果promise1的onRejected执行成功了，promise2应该被resolve。

const rejectedFnWithCatch = (resolve, reject) => {
     try {
         rejectedFn(this.reason);
         if (this.isFunction(onRejected)) {
             resolve();
         }
     } catch (e) {
         reject(e);
     }
 }

5.4 如果 onFulfilled 或者 onRejected 返回一个值 x ，则运行resolvePromise方法

 then(onFulfilled, onRejected) {
     const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
         return value;
     }
     const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => {
         throw reason;
     };
     const fulFilledFnWithCatch = (resolve, reject, newPromise) => {
         try {
             if (!this.isFunction(onFulfilled)) {
                 resolve(this.value);
             } else {
                 const x = fulFilledFn(this.value);
                 this.resolvePromise(newPromise, x, resolve, reject);
             }
         } catch (e) {
             reject(e)
         }
     };
     const rejectedFnWithCatch = (resolve, reject, newPromise) => {
         try {
             if (!this.isFunction(onRejected)) {
                 reject(this.reason);
             } else {
                 const x = rejectedFn(this.reason);
                 this.resolvePromise(newPromise, x, resolve, reject);
             }
         } catch (e) {
             reject(e);
         }
     }
     switch (this.status) {
         case FULFILLED: {
             const newPromise = new MyPromise((resolve, reject) => fulFilledFnWithCatch(resolve, reject, newPromise));
             return newPromise;
         }
         case REJECTED: {
             const newPromise = new MyPromise((resolve, reject) => rejectedFnWithCatch(resolve, reject, newPromise));
             return newPromise;
         }
         case PENDING: {
             const newPromise = new MyPromise((resolve, reject) => {
                 this.FULFILLED_CALLBACK_LIST.push(() => fulFilledFnWithCatch(resolve, reject, newPromise));
                 this.REJECTED_CALLBACK_LIST.push(() => rejectedFnWithCatch(resolve, reject, newPromise));
             });
             return newPromise;
         }
     }
 }

5.5 resolvePromise方法

resolvePromise(newPromise, x, resolve, reject) {
    // 如果 newPromise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 newPromise
    // 这是为了防止死循环
    if (newPromise === x) {
        return reject(new TypeError('The promise and the return value are the same'));
    }
    if (x instanceof MyPromise) {
        // 如果 x 为 Promise ，则使 newPromise 接受 x 的状态
        // 也就是继续执行x，如果执行的时候拿到一个y，还要继续解析y
        // 这个if跟下面判断then然后拿到执行其实重复了，可有可无
        x.then((y) => {
            resolvePromise(newPromise, y, resolve, reject);
        }, reject);
    } else if (typeof x === 'object' || this.isFunction(x)) {
        // 如果 x 为对象或者函数
        // 这个坑是跑测试的时候发现的，如果x是null，应该直接resolve
        if (x === null) {
            return resolve(x);
        }
        let then = null;
        try {
            // 把 x.then 赋值给 then 
            then = x.then;
        } catch (error) {
            // 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
            return reject(error);
        }
        // 如果 then 是函数
        if (this.isFunction(then)) {
            let called = false;
            // 将 x 作为函数的作用域 this 调用之
            // 传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise
            // 名字重名了，我直接用匿名函数了
            try {
                then.call(
                    x,
                    // 如果 resolvePromise 以值 y 为参数被调用，则运行 resolvePromise
                    (y) => {
                        // 如果 resolvePromise 和 rejectPromise 均被调用，
                        // 或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用
                        // 实现这条需要前面加一个变量called
                        if (called) return;
                        called = true;
                        resolvePromise(promise, y, resolve, reject);
                    },
                    // 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
                    (r) => {
                        if (called) return;
                        called = true;
                        reject(r);
                    });
            } catch (error) {
                // 如果调用 then 方法抛出了异常 e：
                // 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
                if (called) return;
                // 否则以 e 为据因拒绝 promise
                reject(error);
            }
        } else {
            // 如果 then 不是函数，以 x 为参数执行 promise
            resolve(x);
        }
    } else {
        // 如果 x 不为对象或者函数，以 x 为参数执行 promise
        resolve(x);
    }
}

5.6 onFulfilled 和 onRejected 是微任务

可以用queueMicrotask包裹执行函数

then(onFulfilled, onRejected) {
    const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
        return value;
    }
    const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => {
        throw reason;
    };
    const fulFilledFnWithCatch = (resolve, reject, newPromise) => {
        queueMicrotask(() => {
            try {
                if (!this.isFunction(onFulfilled)) {
                    resolve(this.value);
                } else {
                    const x = fulFilledFn(this.value);
                    this.resolvePromise(newPromise, x, resolve, reject);
                }
            } catch (e) {
                reject(e)
            }
        })
    };
    const rejectedFnWithCatch = (resolve, reject, newPromise) => {
        queueMicrotask(() => {
            try {
                if (!this.isFunction(onRejected)) {
                    reject(this.reason);
                } else {
                    const x = rejectedFn(this.reason);
                    this.resolvePromise(newPromise, x, resolve, reject);
                }
            } catch (e) {
                reject(e);
            }
        })
    }
    switch (this.status) {
        case FULFILLED: {
            const newPromise = new MyPromise((resolve, reject) => fulFilledFnWithCatch(resolve, reject, newPromise));
            return newPromise;
        }
        case REJECTED: {
            const newPromise = new MyPromise((resolve, reject) => rejectedFnWithCatch(resolve, reject, newPromise));
            return newPromise;
        }
        case PENDING: {
            const newPromise = new MyPromise((resolve, reject) => {
                this.FULFILLED_CALLBACK_LIST.push(() => fulFilledFnWithCatch(resolve, reject, newPromise));
                this.REJECTED_CALLBACK_LIST.push(() => rejectedFnWithCatch(resolve, reject, newPromise));
            });
            return newPromise;
        }
    }
}

5.7 catch方法实现

catch (onRejected) {
    return this.then(null, onRejected);
}

2、测试

完整代码测试一下：

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  FULFILLED_CALLBACK_LIST = [];
  REJECTED_CALLBACK_LIST = [];
  _status = PENDING;
  constructor(fn) {
    // 初始状态为pending
    this.status = PENDING;
    this.value = null;
    this.reason = null;
    try {
      fn(this.resolve.bind(this), this.reject.bind(this));
    } catch (e) {
      this.reject(e);
    }
  }
  get status() {
    return this._status;
  }
  set status(newStatus) {
    this._status = newStatus;
    switch (newStatus) {
      case FULFILLED: {
        this.FULFILLED_CALLBACK_LIST.forEach(callback => {
          callback(this.value);
        });
        break;
      }
      case REJECTED: {
        this.REJECTED_CALLBACK_LIST.forEach(callback => {
          callback(this.reason);
        });
        break;
      }
    }
  }
  resolve(value) {
    if (this.status === PENDING) {
      this.value = value;
      this.status = FULFILLED;
    }
  }
  reject(reason) {
    if (this.status === PENDING) {
      this.reason = reason;
      this.status = REJECTED;
    }
  }
  then(onFulfilled, onRejected) {
    const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
      return value;
    }
    const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => {
      throw reason;
    };
    const fulFilledFnWithCatch = (resolve, reject, newPromise) => {
      queueMicrotask(() => {
        try {
          if (!this.isFunction(onFulfilled)) {
            resolve(this.value);
          } else {
            const x = fulFilledFn(this.value);
            this.resolvePromise(newPromise, x, resolve, reject);
          }
        } catch (e) {
          reject(e)
        }
      })
    };
    const rejectedFnWithCatch = (resolve, reject, newPromise) => {
      queueMicrotask(() => {
        try {
          if (!this.isFunction(onRejected)) {
            reject(this.reason);
          } else {
            const x = rejectedFn(this.reason);
            this.resolvePromise(newPromise, x, resolve, reject);
          }
        } catch (e) {
          reject(e);
        }
      })
    }
    switch (this.status) {
      case FULFILLED: {
        const newPromise = new MyPromise((resolve, reject) => fulFilledFnWithCatch(resolve, reject, newPromise));
        return newPromise;
      }
      case REJECTED: {
        const newPromise = new MyPromise((resolve, reject) => rejectedFnWithCatch(resolve, reject, newPromise));
        return newPromise;
      }
      case PENDING: {
        const newPromise = new MyPromise((resolve, reject) => {
          this.FULFILLED_CALLBACK_LIST.push(() => fulFilledFnWithCatch(resolve, reject, newPromise));
          this.REJECTED_CALLBACK_LIST.push(() => rejectedFnWithCatch(resolve, reject, newPromise));
        });
        return newPromise;
      }
    }
  }
  resolvePromise(newPromise, x, resolve, reject) {
    // 如果 newPromise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 newPromise
    // 这是为了防止死循环
    if (newPromise === x) {
      return reject(new TypeError('The promise and the return value are the same'));
    }
    if (x instanceof MyPromise) {
      // 如果 x 为 Promise ，则使 newPromise 接受 x 的状态
      // 也就是继续执行x，如果执行的时候拿到一个y，还要继续解析y
      x.then((y) => {
        this.resolvePromise(newPromise, y, resolve, reject);
      }, reject);
    } else if (typeof x === 'object' || this.isFunction(x)) {
      // 如果 x 为对象或者函数
      if (x === null) {
        // null也会被判断为对象
        return resolve(x);
      }
      let then = null;
      try {
        // 把 x.then 赋值给 then 
        then = x.then;
      } catch (error) {
        // 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
        return reject(error);
      }
      // 如果 then 是函数
      if (this.isFunction(then)) {
        let called = false;
        // 将 x 作为函数的作用域 this 调用
        // 传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise
        try {
          then.call(
            x,
            // 如果 resolvePromise 以值 y 为参数被调用，则运行 resolvePromise
            (y) => {
              // 需要有一个变量called来保证只调用一次.
              if (called) return;
              called = true;
              this.resolvePromise(newPromise, y, resolve, reject);
            },
            // 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
            (r) => {
              if (called) return;
              called = true;
              reject(r);
            });
        } catch (error) {
          // 如果调用 then 方法抛出了异常 e：
          if (called) return;
          // 否则以 e 为据因拒绝 promise
          reject(error);
        }
      } else {
        // 如果 then 不是函数，以 x 为参数执行 promise
        resolve(x);
      }
    } else {
      // 如果 x 不为对象或者函数，以 x 为参数执行 promise
      resolve(x);
    }
  }
  isFunction(param) {
    return typeof param === 'function';
  }
  catch(onRejected) {
    return this.then(null, onRejected);
  }
}
const test = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('状态变化');
  }, 1000);
}).then(console.log);
console.log(test);
setTimeout(() => {
  console.log(test);
}, 2000)

3、Promise其他扩展方法

3.1 Promise.resolve方法

将现有对象转为Promise对象，如果 Promise.resolve 方法的参数，不是具有 then 方法的对象（又称 thenable 对象），则返回一个新的 Promise 对象，且它的状态为fulfilled。

static resolve(param) {
    if (param instanceof MyPromise) {
        return param;
    }
    return new MyPromise(function (resolve) {
        resolve(param);
    });
}

3.2 Promise.reject方法

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

3.3 promise.race方法

const p = MyPromise.race([p1, p2, p3]);

该方法是将多个 Promise 实例，包装成一个新的 Promise 实例。
只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

static race(promiseList) {
    return new MyPromise((resolve, reject) => {
        const length = promiseList.length;
        if (length === 0) {
            return resolve();
        } else {
            for (let i = 0; i < length; i++) {
                MyPromise.resolve(promiseList[i]).then(
                    (value) => {
                        return resolve(value);
                    },
                    (reason) => {
                        return reject(reason);
                    });
            }
        }
    });
}

3.4 promise.all方法

const p = MyPromise.all([p1, p2, p3]);

该方法是将多个 Promise 实例，包装成一个新的 Promise 实例。
这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息。

static all(promiseArray) {
    return new MyPromise(function (resolve, reject) {
        //判断参数类型
        if (!Array.isArray(promiseArray)) {
            return reject(new TypeError('arguments muse be an array'))
        }
        let counter = 0;
        let promiseNum = promiseArray.length;
        let resolvedArray = [];
        for (let i = 0; i < promiseNum; i++) {
            // 3. 这里为什么要用Promise.resolve?
            Promise.resolve(promiseArray[i]).then((value) => {
                counter++;
                resolvedArray[i] = value; // 2. 这里直接Push, 而不是用索引赋值, 有问题吗
                if (counter == promiseNum) { // 1. 这里如果不计算counter++, 直接判断resolvedArr.length === promiseNum， 会有问题吗?
                    // 4. 如果不在.then里面, 而在外层判断, 可以吗?
                    resolve(resolvedArray)
                }
            }).catch(e => reject(e));
        }
    })
}

4、规范

回过头来我们再来看一遍规范：

参数要求
- onFulfilled 必须是函数类型, 如果不是函数, 应该被忽略.
- onRejected 必须是函数类型, 如果不是函数, 应该被忽略.
onFulfilled 特性
- 在promise变成 fulfilled 时，应该调用 onFulfilled, 参数是value
- 在promise变成 fulfilled 之前, 不应该被调用.
- 只能被调用一次(所以在实现的时候需要一个变量来限制执行次数)
onRejected 特性
- 在promise变成 rejected 时，应该调用 onRejected, 参数是reason
- 在promise变成 rejected 之前, 不应该被调用.
- 只能被调用一次(所以在实现的时候需要一个变量来限制执行次数)
onFulfilled 和 onRejected 应该是微任务
- 这里用queueMicrotask来实现微任务的调用.
then方法可以被调用多次
- promise状态变成 fulfilled 后，所有的 onFulfilled 回调都需要按照then的顺序执行, 也就是按照注册顺序执行(所以在实现的时候需要一个数组来存放多个onFulfilled的回调)
- promise状态变成 rejected 后，所有的 onRejected 回调都需要按照then的顺序执行, 也就是按照注册顺序执行(所以在实现的时候需要一个数组来存放多个onRejected的回调)

返回值
then 应该返回一个promise

promise2 = promise1.then(onFulfilled, onRejected);

onFulfilled 或 onRejected 执行的结果为x, 调用 resolvePromise( 这里大家可能难以理解, 可以先保留疑问, 下面详细讲一下resolvePromise是什么东西 )
如果 onFulfilled 或者 onRejected 执行时抛出异常e, promise2需要被reject
如果 onFulfilled 不是一个函数, promise2 以promise1的value 触发fulfilled
如果 onRejected 不是一个函数, promise2 以promise1的reason 触发rejected
1. resolvePromise
```
resolvePromise(promise2, x, resolve, reject)
```

如果 promise2 和 x 相等，那么 reject TypeError
如果 x 是一个 promsie
- 如果x是pending态，那么promise必须要在pending,直到 x 变成 fulfilled or rejected.
- 如果 x 被 fulfilled, fulfill promise with the same value.
- 如果 x 被 rejected, reject promise with the same reason.
如果 x 是一个 object 或者是一个 function let then = x.then.
- 如果 x.then 这步出错，那么 reject promise with e as the reason.
- 如果 then 是一个函数，then.call(x, resolvePromiseFn, rejectPromise)
  - resolvePromiseFn 的入参是 y, 执行 resolvePromise(promise2, y, resolve, reject);
  - rejectPromise 的入参是 r, reject promise with r.
  - 如果 resolvePromise 和 rejectPromise 都调用了，那么第一个调用优先，后面的调用忽略。
  - 如果调用then抛出异常e
    - 如果 resolvePromise 或 rejectPromise 已经被调用，那么忽略则，reject promise with e as the reason
- 如果 then 不是一个function. fulfill promise with x.

5、总结

本节我们实现了then方法，以及Promise的扩展方法，相信掌握本节知识点以后对Promise就不再陌生。

前端学习笔记

二、以小白视角一步步实现Promise源码(二)