手写 promise 要点

• promise 的三个状态 pending、fulfilled、rejected
• promise 接收的两个参数都是函数
• promise 的 then 方法，分别处理三种状态下如何执行
• promise 的 catch 方法，其实是 then 的语法糖
• promise.resolve()、promise.reject()、promise.all([])、promise.race([]) 是类的静态方法，都是返回一个新的 promise
• promise.all([]) 必须是所有的 promise 都是 fulfilled 状态，才会返回结果
• promise.race([]) 只要有一个是 fulfilled 状态，就返回其结果，但要注意的是，如果第一个是 rejected 状态了，就不会返回结果了

/**
 * @description MyPromise
 */
class MyPromise {
  state = 'pending'; // 初始状态
  value = undefined; // 成功后的值
  reason = undefined; // 失败的原因

  resolvedCallbacks = []; // pending 状态下存储成功的回调函数集合
  rejectedCallbacks = []; // pending 状态下存储失败的回调函数集合

  constructor (fn) {
    const resolveHandler = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.resolvedCallbacks.forEach(fn => fn(this.value))
      }
    };
    const rejectedHandler = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.rejectedCallbacks.forEach(fn => fn(this.reason))
      }
    };
    try {
      fn(resolveHandler, rejectedHandler);
    } catch (err) {
      rejectedHandler(err);
    }
    
  }
  then (fn1, fn2) {
    // 当 pending 状态， fn1 fn2 会被存储到 callbacks中
    fn1 = typeof fn1 === 'function' ? fn1 : (v) => v;
    fn2 = typeof fn2 === 'function' ? fn2 : (e) => e;

    if (this.state === 'pending') {
      const p1 = new MyPromise((resolve, reject) => {
        this.resolvedCallbacks.push(() => {
          try {
            const newValue = fn1(this.value);
            resolve(newValue);
          } catch (err) {
            reject(err)
          }
        });
        this.rejectedCallbacks.push(() => {
          try {
            const newReason = fn2(this.reason);
            reject(newReason);
          } catch (err) {
            reject(err);
          }
        })
      });
      return p1;
    }

    if (this.state === 'fulfilled') {
      const p1 = new MyPromise((resolve, reject) => {
        try {
          const newValue = fn1(this.value);
          resolve(newValue);
        } catch (err) {
          reject(err);
        }
      });
      return p1;
    }

    if (this.state === 'rejected') {
      const p1 = new MyPromise((resolve, reject) => {
        try {
          const newReason = fn2(this.reason);
          reject(newReason);
        } catch (err) {
          reject(err);
        }
      });
      return p1;
    }
  }

  // catch 其实是 then 的语法糖
  catch (fn) {
    return this.then(null, fn);
  }
}

MyPromise.resolve = function (value) {
  return new MyPromise((resolve, reject) => resolve(value))
}
MyPromise.reject = function (reason) {
  return new MyPromise((resolve, reject) => reject(reason))
}
MyPromise.all = function (promiseList = []) {
  const p1 = new MyPromise((resolve, reject) => {
    const result = [];
    const len = promiseList.length;
    let resolvedCount = 0;
    promiseList.forEach(fn => {
      fn.then(data => {
        result.push(data);
        resolvedCount++;
        if (resolvedCount === len) {
          resolve(result);
        }
      }).catch(err => {
        reject(err);
      })
     
    })
  })
  return p1;
}
MyPromise.race = function (promiseList = []) {
  const p1 = new MyPromise((resolve, reject) => {
    let resolved = false;
    promiseList.forEach(fn => {
      fn.then((data) => {
        if (!resolved) {
          resolve(data);
          resolved = true;
        }
      }).catch(err => {
        reject(err);
      })
    })
  });
  return p1;
}

   // test
   const p1 = new MyPromise((resolve, reject) => {
      resolve(100)
    });
    const p11 = p1.then(res => {
      console.log(res)
      return res + 1;
    })
    const p12 = p11.then(res => {
      console.log(res);
      return res + 1;
    })

    const p2 = MyPromise.resolve(200);
    const p3 = MyPromise.reject('error');
    const p4 = MyPromise.resolve(400);
    const p5 = MyPromise.all([p2, p4]); 
    const p6 = MyPromise.race([p3,p2,p4])