詳解JavaScript如何實現一個簡易的Promise物件

 let p1 = new Promise((resolve, reject) => {
   resolve('成功');
   reject('失敗');
   throw('報錯');  //相當於reject()
 })

 console.log(p1);

class myPromise {
  constructor(executor) {
    this.status = 'pending'; // 變更promise的狀態
    this.value = null;
    
    executor(this.resolve, this.reject); // new 一個myPromise 得到的範例物件裡面有兩個函數
  }

  resolve(value) {
    if (this.status !== 'pending') return;
    this.status = 'fulfilled'; // 變更promise的狀態
    this.value = value;
  }

  reject(reason) {
    if (this.status !== 'pending') return
    this.status = 'rejected';
    this.value = reason;
  }
}

executor(this.resolve.bind(this), this.reject.bind(this))

try {
      executor(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      this.reject(error)
    }

class myPromise {
  constructor(executor) {
    this.status = 'pending'; 
    this.value = null;
    this.onFulfilledCallbacks = []; // 用來儲存成功的回撥(處理非同步)
    this.onRejectedCallbacks = []; // 用來儲存失敗的回撥(處理非同步)
    try {
      executor(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      this.reject(error)
    }
  }

  resolve(value) {
    if (this.status !== 'pending') return;
    this.status = 'fulfilled';
    this.value = value;
    // 呼叫then裡面的回撥
    while (this.onFulfilledCallbacks.length) { // 當非同步成功回撥陣列中存在回撥函數，那就執行
      this.onFulfilledCallbacks.shift()(this.value)
    }
  }

  reject(reason) {
    if (this.status !== 'pending') return
    this.status = 'rejected';
    this.value = reason;
    while (this.onRejectedCallbacks.length) { // 當非同步失敗回撥陣列中存在回撥函數，那就執行
      this.onRejectedCallbacks.shift()(this.value)
    }
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val  // 判斷.then的第一個引數是不是一個函數，如果不是就直接作為結果返回
    onRejected = typeof onRejected === 'function' ? onRejected : val => { throw val } // 判斷.then的第二個引數是不是一個函數，如果不是就直接作為錯誤返回

    var thenPromise = new myPromise((resolve, reject) => {  // 因為.then返回的是一個心的Promise物件

      const resolvePromise = callback => {  // 用於判斷回撥函數的型別
        setTimeout(() => {   // 讓整個回撥函數比同步程式碼晚一點執行，官方不是使用setTimeout實現
          try {
            const x = callback(this.value);
            if (x === thenPromise) {  // 你正在返回自身
              throw new Error('不允許返回自身！');
            }
            if (x instanceof myPromise) { // 返回的是一個Promise物件
              x.then(resolve, reject);
            } else { // 直接返回一個值，作為resolve的值，傳遞給下一個.then
              resolve(x);
            }
          } catch (error) {
            reject(error);
            throw new Error(error)
          }
        })
      }

      if (this.status === 'fulfilled') {
        resolvePromise(onFulfilled)
      } else if (this.status === 'rejected') {
        resolvePromise(onRejected)
      } else if (this.status === 'pending') {
        this.onFulfilledCallbacks.push(resolvePromise.bind(this, onFulfilled));
        this.onRejectedCallbacks.push(resolvePromise.bind(this, onRejected));
      }
    })
    return thenPromise
  }
}