以小白视角一步步实现Promise源码

415 阅读12分钟

学习之前,我们需要了解Promise的常用操作,不了解Promise是什么的可以移步带你熟悉异步解决方案(二)

1、Promise术语

在实现Promise之前,我们先来了解一下Promise中的常用术语:

  1. promise 是一个有then方法的对象或者是函数,行为遵循本规范;
  2. thenable 是一个有then方法的对象或者是函数;
  3. value 是promise状态成功时的值,也就是resolve的参数, 包括各种数据类型, 也包括undefined/thenable或者是 promise;
  4. reason 是promise状态失败时的值, 也就是reject的参数, 表示拒绝的原因;
  5. exception 是一个使用throw抛出的异常值;

2、Promise状态规范

2.1  Promise实例状态

Promise 实例有三种状态:

  • 等待中(pending)
  • 完成了 (fulfilled)
  • 拒绝了(rejected)

2.2 状态解析

  • pending
    • 初始的状态, 可改变.
    • 一个promise在resolve或者reject前都处于这个状态。
    • 可以通过 resolve -> fulfilled 状态;
    • 可以通过 reject -> rejected 状态;
  • fulfilled
    • 是最终态, 不可变.
    • 一个promise被resolve后会变成这个状态.
    • 必须拥有一个value值
  • rejected
    • 最终态, 不可变.
    • 一个promise被reject后会变成这个状态
    • 必须拥有一个reason

2.3 状态转换

一旦从等待状态变成为其他状态就永远不能更改状态了,也就是说一旦状态变为 resolved 后,就不能再次改变。

pending -> resolve(value)   fulfilled

pending -> reject(reason)   rejected

3、一步步实现Promise

一个 Promise 应该具备的最基本的特征,至少有以下几点:

  • 可以接收一个 executor 作为入参
  • 具备 pending、resolved 和 rejected 这三种状态
  1. 我们将自己的写的Promise命名为MyPromise
class MyPromise {
    constructor() {

    }
}
  1. 定义三种状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
  1. 设置初始化状态
class MyPromise {
    constructor() {
        // 初始状态为pending
        this.status = PENDING;
        this.value = null;
        this.reason = null;
    }
}
  1. 编写resolve方法

根据规范resolve方法要更改status,从pending改变为fulfilled

resolve(value) {
    if (this.status === PENDING) {
       this.status = FULFILLED;
       this.value = value;
     }
}
  1. 编写reject方法

根据规范reject方法也要更改status,从pending改变为reject

reject(reason) {
    if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;
     }
}
  1. 加入参数

实际开发中我们使用Promise是这样的:

new Promise(( resolve, reject ) => {
    // todo
})

我们需要加入入参:

  • 入参是一个函数, 函数接收resolve和reject两个参数.
  • 注意在初始化promise的时候, 就要执行这个函数, 并且有任何报错都要通过reject抛出去
class MyPromise {
    constructor(execute) {
        // 初始状态为pending
        this.status = PENDING;
        this.value = null;
        this.reason = null;

        try {
            execute(this.resolve.bind(this), this.reject.bind(this));
        } catch (e) {
            this.reject(e);
        }
    }

    resolve(value) {
        if (this.status === PENDING) {
            this.status = FULFILLED;
            this.value = value;
        }
    }

    reject(reason) {
        if (this.status === PENDING) {
            this.status = REJECTED;
            this.reason = reason;
        }
    }
}

4、then方法

  1. then接收两个参数, onFulfilled 和 onRejected
then(onFulfilled, onRejected) {}
  1. 检查并处理参数, 如果不是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
    };
}
  1. 根据当前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;
        }
    }
}
  1. 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;
        }
    }
}
  1. 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);
}

6、测试

完整代码测试一下:

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)

7、Promise其他扩展方法

7.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);
    });
}

7.2 Promise.reject方法

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

7.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);
                    });
            }
        }
    });
}

7.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));
        }
    })
}

8、规范

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

  1. 参数要求

    • onFulfilled 必须是函数类型, 如果不是函数, 应该被忽略.
    • onRejected 必须是函数类型, 如果不是函数, 应该被忽略.
  2. onFulfilled 特性

    • 在promise变成 fulfilled 时,应该调用 onFulfilled, 参数是value
    • 在promise变成 fulfilled 之前, 不应该被调用.
    • 只能被调用一次(所以在实现的时候需要一个变量来限制执行次数)
  3. onRejected 特性

    • 在promise变成 rejected 时,应该调用 onRejected, 参数是reason
    • 在promise变成 rejected 之前, 不应该被调用.
    • 只能被调用一次(所以在实现的时候需要一个变量来限制执行次数)
  4. onFulfilled 和 onRejected 应该是微任务

    • 这里用queueMicrotask来实现微任务的调用.
  5. then方法可以被调用多次

    • promise状态变成 fulfilled 后,所有的 onFulfilled 回调都需要按照then的顺序执行, 也就是按照注册顺序执行(所以在实现的时候需要一个数组来存放多个onFulfilled的回调)
    • promise状态变成 rejected 后,所有的 onRejected 回调都需要按照then的顺序执行, 也就是按照注册顺序执行(所以在实现的时候需要一个数组来存放多个onRejected的回调)
  6. 返回值

    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
  7. 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.

9、总结

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

10、参考链接

Promise A+规范: promisesaplus.com/