Promise 的源码

98 阅读2分钟

编写源码

// promise 的状态 
const PENDING = 'pending'; // 等待
const FULFILLED = 'fulfilled'; // 成功
const REJECTED = 'rejected'; // 失败

class MyPromise {
  constructor(executor) {
    try {
      execcutor(this.resolve, this,reject)
    } catch(e) {
      console.log(e);
    }
  }

  // promsie 状态 
  status = PENDING;

  // 成功之后的值
  value = undefined;

  // 失败之后的原因
  reason = undefined;

  // 存储成功回调
  successCallback = [];

  // 存储失败回调
  failCallback = [];

  resolve = value => {
    // 如果当前的转态不是等待 那么阻止程序继续向下执行
    if (this.status !== PENDING) return;
    
    // 将状态更改为成功
    this. status = FULFILLED;

    // 保存成功之后的值
    this.value = value;

    // 判断成功回调是否存在 如果存在就调用
    // 不过不知道成功回调 数组的长度,所以使用while 循环
    while (this.successCallback.length) {
      // 通过shift()删除第一个值并返回值
      const callback = this.successCallback.shift();

      // 返回的值 是一个函数
      callback();
    }
  }

  reject = reason => {
    // 如果当前的转态不是等待 那么阻止程序继续向下执行
    if (this.status !== PENDING) return;
    
    // 将状态更改为失败
    this. status = REJECTED;

    // 保存失败之后的原因
    this.reason = reason;

    // 判断成功回调是否存在 如果存在就调用
    // 不过不知道成功回调 数组的长度,所以使用while 循环
    while (this.failCallback.length) {
      // 通过shift()删除第一个值并返回值
      const callback = this.failCallback.shift();

      // 返回的值 是一个函数
      callback();
    }
  }

  // then方法
  then(successCallback, failCallback) {

    // 参数可选
    successCallback = successCallback ? successCallback : value => value;
    // 参数可选
    failCallback = failCallback ? failCallback: reason => { throw reason };
    
    let promise2 = new MyPromise((resolve, reject) => {
        // 判断状态
        if (this.status === FULFILLED) {
          // 成功状态
          setTimeout(() => {
            try {
              let x = successCallback(this.value);

              // 下一步是判断是普通值还是promise
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          })
        } else if (this.status === REJECTED) {
          // 失败状态
          setTimeout(() => {
            try {
              let x = failCallback(this.reason);

              // 下一步是判断是普通值还是promise
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          })
        }  else {
          // 等待
          // 将成功回调和失败回调存储起来
          this.successCallback.push(() => {
            setTimeout(() => {
              try {
                let x = successCallback(this.value);
  
                // 下一步是判断是普通值还是promise
                resolvePromise(promise2, x, resolve, reject);
              } catch (e) {
                reject(e);
              }
            })
          })

          this.failCallback.push(() => {
            setTimeout(() => {
              try {
                let x = failCallback(this.reason);

                // 下一步是判断是普通值还是promise
                resolvePromise(promise2, x, resolve, reject);
              } catch (e) {
                reject(e);
              }
            })
          })
        } 

    })

    return promsie2;
  }

  // 不管是失败还是成功都执行这个 finally方法
  finally (callback) {
    return this.then(value => {
      return MyPromise.resolve(callback()).then(() => value)
    },reason => {
      return MyPromise.resolve(callback()).then(() => { throw reason })
    });
  }

  // 错误信息 catch方法
  catch (failCallback) {
    return this.then(undefined, failCallback)
  }

  // 使用静态方法 all 方法
  static all (array) {
    let result = []; // 缓存每个异步的返回值
    let index = 0; // 记录arr的执行值

    // 返回一个新的promise
    return new MyPromise((resolve, reject) => {
      function addData (key, value) {
        result[key] = value;
        index++;

        // 记录值和数组的长度一只就执行resolve
        if (index === array.length) {
          resolve(result);
        }
      }

      // 把数组中的数据一一调用
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        
        //判断是普通值还是promise值
        if (current instanceof MyPromise) {
          // promise 对象
          current.then(value => addData(i, value), reason => reject(reason))
        }else {
          // 普通值
          addData(i, array[i]);
        }
      }
    })
  }

  // 使用静态方法 resolve方法
  static resolve (value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise(resolve => resolve(value));
  }
}

/**
 * 
 * @param  promise2  新创建的promise
 * @param  x         执行了resolve 或是 reject 的返回值 
 * @param  resolve   promise2 的 resolve
 * @param  reject    promise2 的 reject
 */

function resolvePromise(promise2, x, resolve, reject) {
  if(promise2 === x) {
    return reject(new TypeError('promise返回自身会进入死循环的'))
  }

  // 判断是 普通值 还是 promise 对象
  if(x instanceof MyPromise) {
    // promise 对象
    x.then(value => resolve(value), reason => reject(reason))
  } else {
    // 普通值 直接返回值
    resolve(x)
  }
}

module.exports = MyPromise;