SOURCE

/**
 * @description 手动首先一个Promise
 * @author Zaoren
 * @date 2022-11-12
 */

/**
 * @desc Promise是通过new Promise来调用的，是一个类
 */
function MyPromise(executor) {
  // 1. 首先 Promise 内部有个状态，可能是： 'pending' | 'resolved' | 'rejected' 其中的一种，且一旦发生改变之后，就不能变了
  this.state = "pending"; // 初始状态是 pending
  // 2. 内部有一个变量来维护 resolved后 的值
  this.value = "";
  // 3. 内部有一个变量来存储 rejected 的原因
  this.reason = "";

  const self = this;
  // 4. 内部会暴露出 resolved、rejected 两个方法，用来给外部改变内部的状态

  this.onResolvedCallbacks = []
  this.onRejectedCallbacks = [];

  function resolved(val) {
    // 只有 pending 状态下才能改变状态。
    if (self.state === "pending") {
      self.state === "resolved";
      self.value = val;
      self.onResolvedCallbacks.forEach(callbacks => callbacks(self.value));
    }
  }

  function rejected(reason) {
    if (self.state === "pending") {
      self.state === "rejected";
      self.reason = reason;
      self.onRejectedCallbacks.forEach(callbacks => callbacks(self.reason));
    }
  }

  // 5. executor 构造函数是立即执行的
  try {
    executor(resolved, rejected);
  } catch (e) {
    rejected(e);
  }
}

/**
 * @desc then是 Promise 原型上的一个方法
 */
MyPromise.prototype.then = function (onFulfilled, onRejected) {
  // 1. 首先 resolved、rejected 不一定是一个函数 如果该参数不是函数，则会在内部被替换为 (x) => x
  onFulfilled =
    typeof onFulfilled === "function"
      ? onFulfilled
      : function (value) {
          return value;
        };
  onRejected =
    typeof onRejected === "function"
      ? onRejected
      : function (value) {
          return value;
        };
  const self = this;
  // 2. then为了支持链式调用，返回的也是一个Promise 
  return new MyPromise((resolve, rejected) => {

    // 封装前一个 promise 成功时执行的函数
    const decorateOnFulfilled = function() {
      try {
        const result = onFulfilled(self.value);
        return result instanceof MyPromise ? result.then(resolve, rejected) : resolve(result);
      } catch(e) {
        rejected(e);
      }
    }

    // 封装前一个promise失败时执行的函数
    const decorateOnRejected = function() {
      try {
        const result = onRejected(self.reason);
        return result instanceof MyPromise ? result.then(resolve, rejected) : rejected(result);
      } catch(e) {
        rejected(e);
      }
    }

    if (self.state === 'resolved') {
      // 如果 then 调用的时候，状态已经变成 resolved 的了
      decorateOnFulfilled(self.value);
    }
    if (self.state === 'rejected') {
      // 如果 then 调用的时候，状态已经变成 rejected 的了
      decorateOnRejected(self.reason);
    }
    if (self.state === 'pending') {
      // 大多数情况下 Promise 都是异步的。在调用 .then 方法的时候，MyPromise内部都还是 pending 状态
      // 所以需要在 MyPromise内部存一下回调函数, 等状态改变时再调用
      self.onResolvedCallbacks.push(decorateOnFulfilled);
      self.onRejectedCallbacks.push(decorateOnRejected);
    }
  })
};


/**
 * @desc Promise.resolve
*/
MyPromise.resolve = function(val) {
  if (val instanceof MyPromise) {
    return val;
  } else {
    return new MyPromise((resolve) => resolve(val))
  }
}

/**
 * @desc Promise.all 是一个静态方法，通过类名直接调用
 * 返回的也是一个 Promise
*/
MyPromise.all = function(promiseArr) {
  if (!Array.isArray(promiseArr)) {
    console.error('入参必须是数组');
    return;
  }
  let resultCount = 0;
  const resultArr = [];
  return new MyPromise((resolve, rejected) => {
    promiseArr.forEach(promiseItem => {
      MyPromise.resolve(promiseItem).then((value) => {
        resultCount += 1;
        resultArr.push(value);
        if (resultCount === promiseArr.length) {
          resolve(resultArr);
        }
      }, (reason) => {
        rejected(reason);
      })
    })
  })
}

/**
 * @desc Promise.race 是一个静态方法，他返回最先reolved的那个
 * 也是返回一个Promise
*/
MyPromise.race = function(promiseArr) {
  if (!Array.isArray(promiseArr)) {
    console.error('入参必须是数组');
    return;
  }
  return new MyPromise((resolve, reject) => {
    promiseArr.forEach((promiseItem) => {
      try {
        MyPromise.resolve(promiseItem).then((value) => {
          resolve(value);
        }, (reason) => {
          reject(reason);
        })  
      } catch(e) {
        reject(e);
      }
    })
  })
}


// case1: 首先 MyPromise的构造函数是立即执行的
const p1 = new MyPromise((resolve, rejected) => {
  console.log("promise-executor: 我是立即执行的");
  setTimeout(() => {
    // 调用Promise内部的resolve去改变内部状态。
    resolve("resolved val 300ms");
  }, 300);
});

const p2 = new MyPromise((resolve, rejected) => {
  setTimeout(() => {
    // 调用Promise内部的resolve去改变内部状态。
    resolve("resolved val 400ms");
  }, 400);
});

// case2: .then方法
p1.then(
  (res) => {
    console.log("promise-fullfiled:", res);
  },
  (res) => {
    console.log("rejected res:", res);
  }
);

// case3: .then支持链式调用
p1.then((res) => {
  return 'fullfiled res - then res';
}).then((res) => console.log("promise-then-then:", res));

// case4: MyPromise.all 当所有的Promise都返回之后才能
MyPromise.all([p1, p2]).then((res) => {
  console.log("promise-all: promiseRes", res);
});

// case5: MyPromise.race 返回最先resolve的那个
MyPromise.race([p1, p2]).then((res) => {
  console.log("promise-race: promiseRes", res);
});

// case6: MyPromise.resolve 会返回一个 Promise 对象
// console.log('promise-resolve: ', MyPromise.resolve(3));