使用原生javascript实现Promise方法

235 阅读2分钟
const PENDING = "pending"; // 等待
const FULFILLED = "fulfilled"; // 成功
const REJECTED = "rejected"; // 失败

class MyPromise {
  constructor(executor) {
    try{
      // 传入的回调函数在实例化时立即执行
      executor(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }

  // 当前状态
  status = PENDING;
  // 成功之后的值
  value = undefined;
  // 失败后的原因
  reason = undefined;
  // 成功回调
  // successCallback = undefined;
  successCallback = [];
  // 失败回调
  // failCallback = undefined;
  failCallback = [];

  resolve = value => {
    // 如果状态不是pending,则直接return
    if(this.status !== PENDING) return;
    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功后的值
    this.value = value;
    // 成功回调是否存在
    // this.successCallback && this.successCallback(this.value);
    while(this.successCallback.length) this.successCallback.shift()();
  }

  reject = reason => {
    // 如果状态不是pending,则直接return
    if(this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败的原因
    this.reason = reason;
    // 失败回调是否存在
    // this.failCallback && this.failCallback(reason);
    while(this.failCallback.length) this.failCallback.shift()();
  }

  then(successCallback, failCallback) {
    successCallback = successCallback ? successCallback : value => value;
    failCallback = failCallback ? failCallback : reason => { throw reason };
    let promise = new MyPromise((resovle, reject) => {
      // 判断状态
      if(this.status === FULFILLED) {
        // 异步是为了等待new运算符运算完毕,返回本次的promise对象。
        setTimeout(() => {
          try {
            let response = successCallback(this.value);
            // 判断response的值是普通值还是promise对象
            // 如果是普通值,直接调用resovle
            // 如果是promise对象,需先查看promise对象返回结果
            // 根据结果决定调用resovle还是reject
            resovlePromise(promise, response, resovle, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      } else if(this.status === REJECTED) {
        // 异步是为了等待new运算符运算完毕,返回本次的promise对象。
        setTimeout(() => {
          try {
            let response = failCallback(this.reason);
            // 判断response的值是普通值还是promise对象
            // 如果是普通值,直接调用resovle
            // 如果是promise对象,需先查看promise对象返回结果
            // 根据结果决定调用resovle还是reject
            resovlePromise(promise, response, resovle, reject)
          } catch (e) {
            reject(e)
          }
        },0)
      } else {
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let response = successCallback(this.value);
              // 判断response的值是普通值还是promise对象
              // 如果是普通值,直接调用resovle
              // 如果是promise对象,需先查看promise对象返回结果
              // 根据结果决定调用resovle还是reject
              resovlePromise(promise, response, resovle, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)
        });
        this.failCallback.push(() => {
          // 异步是为了等待new运算符运算完毕,返回本次的promise对象。
          setTimeout(() => {
            try {
              let response = failCallback(this.reason);
              // 判断response的值是普通值还是promise对象
              // 如果是普通值,直接调用resovle
              // 如果是promise对象,需先查看promise对象返回结果
              // 根据结果决定调用resovle还是reject
              resovlePromise(promise, response, resovle, reject)
            } catch (e) {
              reject(e)
            }
          },0)
        });
      }
    })
    // 链式调用then需要返回promise对象
    return promise
  }

  catch(failCallback) {
    return this.then(undefined, failCallback)
  }

  static all(array) {
    let result = [];
    let index = 0;
    return new MyPromise((resolve, reject) => {
      function pushItem (i, v) {
        result[i] = v;
        index++;
        if(index === array.length) resolve(result);
      }
      for(let i = 0; i < array.length; i++) {
        if(array[i] instanceof MyPromise) {
          array[i].then(value => resolve(pushItem(i, value)), reason => reject(reason))
        } else {
          pushItem(i, array[i])
        }
      }
    })
  }

  static resolve (value) {
    if(value instanceof MyPromise) return value;
    return new MyPromise(resovle => resovle(value))
  }

  finally (callback) {
    return this.then(value => {
      return MyPromise.resolve(callback()).then(() => value)
    }, reason => {
      return MyPromise.resolve(callback()).then(() => {throw reason})
    })
  }
}

function resovlePromise (promise, response, resolve, reject) {
  // 说明本次返回的promise对象就是then本身的promise对象,需要抛出异常。
  if(promise === response) {
    console.log(123123)
    return reject(new TypeError("Chainning cycle detected for promise #<Promise>"))
  }
  if(response instanceof MyPromise) {
    // response是promise对象
    response.then(resolve, reject)
  } else {
    // 普通值
    resolve(response)
  }
}

module.exports = MyPromise;