JS中Promise/A+规范的实现（直接上代码）

前言

我是跟着b站视频敲的。

视频地址：《【全网首发:完结】Promises/A+规范与源码重写【面试必备】》

https://www.bilibili.com/video/BV1nV411S7Et

视频质量很好，一边带着读英文规范，一遍写代码，说逻辑，跟着视频实现了一个完整的，符合规范的Promise对象。

在视频代码的基础上，我补充了all、race、Promise.resolve、Promise.reject、finally等方法的实现。

建议跟着视频做一遍后再来阅读本文。

代码

const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECT = 'REJECTED'

function resolvePromise(promise2, x, resolve, reject) {
    // console.log(x);
    // console.log(promise2);
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle dete'))
    }

    let called = false;

    if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
        try {
            let then = x.then;

            if (typeof then === 'function') {
                // 认定其为promise
                then.call(x,
                    (y) => {
                        if (called) return;
                        called = true;
                        // resolve(y);
                        resolvePromise(promise2, y, resolve, reject)
                    }, (r) => {
                        if (called) return;
                        called = true;
                        reject(r);
                    }
                )
            } else {
                // 不是promise  是一个普通值
                resolve(x);
            }
        } catch (e) {
            if (called) return;
            called = true;
            reject(e);
        }
    } else {
        resolve(x);
    }
}

class MyPromise {
    constructor(excutor) {
        this.status = PENDING
        this.value = undefined
        this.reason = undefined

        this.onFulfilledCallbacks = [];
        this.onRejectedCallbacks = [];


        const resolve = (value) => {
            if (this.status == PENDING) {
                // 转变状态
                this.status = FULFILLED
                this.value = value

                this.onFulfilledCallbacks.forEach(fn => fn());
            }
        }

        const reject = (reason) => {
            if (this.status === PENDING) {
                // 转变状态
                this.status = REJECT
                this.reason = reason
                this.onRejectedCallbacks.forEach(fn => fn())
            }
        }

        try {
            excutor(resolve, reject);
        } catch (e) {
            reject(e)
        }

    }

    // x 为 普通值 或 promise
    then(onFulfilled, onRejected) {
        // 不传的时候， 默认值
        onFulfilled = typeof onFulfilled === 'function'
            ? onFulfilled
            : value => value;

        onFulfilled = typeof onFulfilled === 'function'
            ? onFulfilled
            : reason => { throw reason }

        let promise2 = new MyPromise((resolve, reject) => {
            if (this.status === FULFILLED) {
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                }, 0)
            }

            if (this.status === REJECT) {
                setTimeout(() => {
                    try {
                        let x = onRejected(this.reason)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                }, 0)
            }

            if (this.status === PENDING) {
                // 订阅过程
                this.onFulfilledCallbacks.push(() => {
                    try {
                        let x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                })

                this.onRejectedCallbacks.push(() => {
                    try {
                        let x = onRejected(this.reason);
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                })

            }
        })


        return promise2;
    }

    // catch方法
    catch(errorCallback) {
        return this.then(null, errorCallback);
    }

    // finally方法
    finally(cb) {
        return this.then(
            value => MyPromise.resolve(cb())
                .then(
                    () => value
                ),
            reason => MyPromise.resolve(cb())
                .then(
                    () => { throw reason }
                )
        );
    }

    // 添加静态resolve方法
    static resolve(value) {
        // 如果参数是MyPromise实例，直接返回这个实例
        if (value instanceof MyPromise) return value
        return new MyPromise(resolve => resolve(value))
    }

    // 添加静态reject方法
    static reject(value) {
        return new MyPromise((resolve, reject) => reject(value))
    }

    
    // all 方法
    static all(promises) {
        return new MyPromise(
            (resolve, reject) => {
                let fulfilledCount = 0
                const itemNum = promises.length
                const rets = Array.from({ length: itemNum })
                promises.forEach(
                    (promise, index) => {
                        MyPromise.resolve(promise).then(result => {
                            fulfilledCount++;
                            rets[index] = result;
                            if (fulfilledCount === itemNum) {
                                resolve(rets);
                            }
                        }, reason => reject(reason));
                    }
                )
            }
        )
    }

    // race 方法
    static race(promises) {
        return new Promise(function (resolve, reject) {
            for (let i = 0; i < promises.length; i++) {
                Promise.resolve(promises[i]).then(
                    function (value) {
                        return resolve(value)
                    },
                    function (reason) {
                        return reject(reason)
                    })
            }
        })
    }
}

测试

一些测试代码如下，可以试着跑跑看

let kfc = new MyPromise((resolve, reject) => {
    console.log("肯德基厨房开始做饭");
    resolve("我是肯德基，你的餐已经做好了");
});

let dad = kfc.then(msg => {
    console.log(`收到肯德基消息: ${msg}`);
    return {
        then(resolve) {
            setTimeout(() => {
                resolve("孩子，我吃了两秒了，不辣，你可以吃了");
            }, 2000);
        }
    };
});
let son = dad.then(msg => {
    return new MyPromise((resolve, reject) => {
        console.log(`收到爸爸消息: ${msg}`);
        setTimeout(() => {
            resolve("妈妈，我和向军爸爸吃完饭了");
        }, 2000);
    });
});

let ma = son.then(msg => {
    console.log(`收到孩子消息: ${msg},事情结束`);
});

// let promise = new MyPromise((resolve, reject) => {
//     // resolve('success');
//     setTimeout(()=>{
//         resolve('Success');
//     }, 2000)

//     // reject('Error');
//     // throw new Error('Exception:Error')
// })

// promise.then(
//     (value) => {
//         console.log('FulFilled1:' + value);
//     },
//     (reason) => {
//         console.log('Rejected1:' + reason);
//     }
// )

// promise.then(
//     (value) => {
//         console.log('FulFilled2:' + value);
//     },
//     (reason) => {
//         console.log('Rejected2:' + reason);
//     }
// )


// let promise = new Promise((resolve, reject) => {
//     setTimeout(() => {
//         let value = 'Success'
//         resolve(value);
//     }, 2000)
// })

// promise.then((value) => {
//     return value;
// })
//     .then((value) => {
//         return new Promise((resolve, reject) => {
//             setTimeout(() => {
//                 // resolve(value);
//                 reject("ERROR")
//             }, 2000);
//         })
//     })
//     .then(
//         (value) => {
//             console.log(value);
//             console.log('Fulfilled:' + value);
//         },
//         (reason) => {
//             console.log('Rejected:' + reason)  // Rejected:ERROR
//         }
//     )
//     .then(
//         (value) => {
//             // console.log(value)       // undefinded
//             // console.log('Fulfilled:' + value);   // Fulfilled:undefined
//             throw new Error("Throw Error")
//         },
//         (reason) => {
//             console.log('Rejected:' + reason)
//         }
//     )
//     .then(
//         (value) => {
//             console.log('Fulfilled:' + value);
//         },
//         (reason) => {
//             console.log('Rejected:' + reason)
//         }
//     )
//     .catch((err) => {
//         console.log("catch" + err)
//     })


// catch在promise的源码层面上就是一个then
// 也遵循then的运行原则

// 成功的条件
// then return 普通的js value
// then return 新的promise成功态的结果 value

// 失败的条件
// then return 新的promise失败态的原因 reason
// then 跑出了异常 throw new Error

// promise链式调用
// javascript jQuery  return this
// then 不具备this
// return new Promise


// let promise2 = promise.then((value) => {
//     // 第一次返回的promise结果
// }).then((value) => {
//     // return 第二次返回的新的promise结果
// })

// let promise2 = promise.then(() => {
//     // 第一次返回的promise结果
// })

// // 第一次返回的promise结果
// promise2.then(() => {

// })


let promise1 = new MyPromise((resolve, reject) => {
    resolve('promise1');
    // reject('Error');
});

let promise2 = promise1.then(
    (value) => {
        // return Promise.resolve(value + '->then->promise2')
        // return value + '->then->promise2'
        // return new Promise(
        //     (resolve, reject) => {
        //         resolve(value + '->then->promise2');
        //     })
        // console.log(value)
        // return "这是x的值"


        // return new Error('Error')
        // return Promise.resolve("Promise resolve")
        // return 'Then Promise'
        return new MyPromise(
            (resolve, reject) => {
                // resolve(value + '->then->promise2');
                // resolve('new Promise resolve');
                // return reason;
                setTimeout(
                    () => {
                        resolve(
                            new MyPromise((resolve, reject) => {
                                resolve(
                                    new MyPromise((resolve, reject) => {
                                        resolve(MyPromise.resolve("setTimeout + new Promise resolve"))
                                    })
                                )
                            })
                        )
                    },
                    2000
                )

            }
        )
    },
    (reason) => {
        console.log(reason);
        return reason;
    }
);

promise2.then().then().then().then().then().then().then(
    (value) => {
        console.log(value);
        // throw Error("sss")

    },
    (reason) => {
        console.log(reason);
    }).catch((e) => {
        console.log(e)
    })
    .then(null, (e) => {
        console.log(e)
    })

其它版本的实现

上面的代码是跟着规范一步一步来的，最后还可以再优化一下。

下面的提供的实现代码来自于文章《Promise实现原理（附源码）》

  // 判断变量否为function
  const isFunction = variable => typeof variable === 'function'
  // 定义Promise的三种状态常量
  const PENDING = 'PENDING'
  const FULFILLED = 'FULFILLED'
  const REJECTED = 'REJECTED'

  class MyPromise {
    constructor (handle) {
      if (!isFunction(handle)) {
        throw new Error('MyPromise must accept a function as a parameter')
      }
      // 添加状态
      this._status = PENDING
      // 添加状态
      this._value = undefined
      // 添加成功回调函数队列
      this._fulfilledQueues = []
      // 添加失败回调函数队列
      this._rejectedQueues = []
      // 执行handle
      try {
        handle(this._resolve.bind(this), this._reject.bind(this)) 
      } catch (err) {
        this._reject(err)
      }
    }
    // 添加resovle时执行的函数
    _resolve (val) {
      const run = () => {
        if (this._status !== PENDING) return
        this._status = FULFILLED
        // 依次执行成功队列中的函数，并清空队列
        const runFulfilled = (value) => {
          let cb;
          while (cb = this._fulfilledQueues.shift()) {
            cb(value)
          }
        }
        // 依次执行失败队列中的函数，并清空队列
        const runRejected = (error) => {
          let cb;
          while (cb = this._rejectedQueues.shift()) {
            cb(error)
          }
        }
        /* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,
          当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态
        */
        if (val instanceof MyPromise) {
          val.then(value => {
            this._value = value
            runFulfilled(value)
          }, err => {
            this._value = err
            runRejected(err)
          })
        } else {
          this._value = val
          runFulfilled(val)
        }
      }
      // 为了支持同步的Promise，这里采用异步调用
      setTimeout(run, 0)
    }
    // 添加reject时执行的函数
    _reject (err) { 
      if (this._status !== PENDING) return
      // 依次执行失败队列中的函数，并清空队列
      const run = () => {
        this._status = REJECTED
        this._value = err
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(err)
        }
      }
      // 为了支持同步的Promise，这里采用异步调用
      setTimeout(run, 0)
    }
    // 添加then方法
    then (onFulfilled, onRejected) {
      const { _value, _status } = this
      // 返回一个新的Promise对象
      return new MyPromise((onFulfilledNext, onRejectedNext) => {
        // 封装一个成功时执行的函数
        let fulfilled = value => {
          try {
            if (!isFunction(onFulfilled)) {
              onFulfilledNext(value)
            } else {
              let res =  onFulfilled(value);
              if (res instanceof MyPromise) {
                // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
                res.then(onFulfilledNext, onRejectedNext)
              } else {
                //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
                onFulfilledNext(res)
              }
            }
          } catch (err) {
            // 如果函数执行出错，新的Promise对象的状态为失败
            onRejectedNext(err)
          }
        }
        // 封装一个失败时执行的函数
        let rejected = error => {
          try {
            if (!isFunction(onRejected)) {
              onRejectedNext(error)
            } else {
                let res = onRejected(error);
                if (res instanceof MyPromise) {
                  // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
                  res.then(onFulfilledNext, onRejectedNext)
                } else {
                  //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
                  onFulfilledNext(res)
                }
            }
          } catch (err) {
            // 如果函数执行出错，新的Promise对象的状态为失败
            onRejectedNext(err)
          }
        }
        switch (_status) {
          // 当状态为pending时，将then方法回调函数加入执行队列等待执行
          case PENDING:
            this._fulfilledQueues.push(fulfilled)
            this._rejectedQueues.push(rejected)
            break
          // 当状态已经改变时，立即执行对应的回调函数
          case FULFILLED:
            fulfilled(_value)
            break
          case REJECTED:
            rejected(_value)
            break
        }
      })
    }
    // 添加catch方法
    catch (onRejected) {
      return this.then(undefined, onRejected)
    }
    // 添加静态resolve方法
    static resolve (value) {
      // 如果参数是MyPromise实例，直接返回这个实例
      if (value instanceof MyPromise) return value
      return new MyPromise(resolve => resolve(value))
    }
    // 添加静态reject方法
    static reject (value) {
      return new MyPromise((resolve ,reject) => reject(value))
    }
    // 添加静态all方法
    static all (list) {
      return new MyPromise((resolve, reject) => {
        /**
         * 返回值的集合
         */
        let values = []
        let count = 0
        for (let [i, p] of list.entries()) {
          // 数组参数如果不是MyPromise实例，先调用MyPromise.resolve
          this.resolve(p).then(res => {
            values[i] = res
            count++
            // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
            if (count === list.length) resolve(values)
          }, err => {
            // 有一个被rejected时返回的MyPromise状态就变成rejected
            reject(err)
          })
        }
      })
    }
    // 添加静态race方法
    static race (list) {
      return new MyPromise((resolve, reject) => {
        for (let p of list) {
          // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
          this.resolve(p).then(res => {
            resolve(res)
          }, err => {
            reject(err)
          })
        }
      })
    }
    finally (cb) {
      return this.then(
        value  => MyPromise.resolve(cb()).then(() => value),
        reason => MyPromise.resolve(cb()).then(() => { throw reason })
      );
    }
  }