今天發現一個問題,看下方代碼

 let p = new Promise(function(resolve, reject) {
    resolve(1)
    console.log(‘2222‘);
 });
p.then(res => {
    console.log(‘1111‘);
})

輸出結果是2222 1111,而自己想的是1111 2222,帶著問題查詢之後發現.

原來then後邊跟的都是異步執行..學習到了.

此鏈接是各位大佬的回答https://www.zhihu.com/question/57071244

用網上學習ES5實現的Promise ,輸出結果和自己想的一樣,原因可以去上方地址找到.

下方是ES5實現的promise

function Promise(callback) {
  var self = this;
  self.status = ‘PENDING‘; // Promise當前的狀態
  self.data = undefined; // Promise的值
  self.onResolvedCallback = []; // Promise resolve時的回調函數集
  self.onRejectedCallback = []; // Promise reject時的回調函數集
  callback(resolve, reject); // 執行executor並傳入相應的參數

  function resolve(value) {
    if (self.status == ‘PENDING‘) {
      self.status == ‘FULFILLED‘;
      self.data = value;
      // 依次執行成功之後的函數棧
      for (var i = 0; i < self.onResolvedCallback.length; i++) {
        self.onResolvedCallback[i](value);
      }
    }
  }

  function reject(error) {
    if (self.status === ‘PENDING‘) {
      self.status = ‘REJECTED‘;
      self.data = error;
      // 依次執行失敗之後的函數棧
      for (var i = 0; i < self.onRejectedCallback.length; i++) {
        self.onRejectedCallback[i](error);
      }
    }
  }
}

Promise.prototype.then = function(onResolved, onRejected) {
  var self = this;
  var promise2;

  // 根據標準，如果then的參數不是function，則我們需要忽略它，此處以如下方式處理
  onResolved = typeof onResolved === ‘function‘ ? onResolved : function(value) {};
  onRejected = typeof onRejected === ‘function‘ ? onRejected : function(reason) {};

  if (self.status === ‘FULFILLED‘) {
    // 如果promise1(此處即為this/self)的狀態已經確定並且是resolved，我們調用onResolved
    // 因為考慮到有可能throw，所以我們將其包在try/catch塊裏
    return (promise2 = new Promise(function(resolve, reject) {
      try {
        var x = onResolved(self.data);
        if (x instanceof Promise) {
          // 如果onResolved的返回值是一個Promise對象，直接取它的結果做為promise2的結果
          x.then(resolve, reject);
        }
        resolve(x); // 否則，以它的返回值做為promise2的結果
      } catch (e) {
        reject(e); // 如果出錯，以捕獲到的錯誤做為promise2的結果
      }
    }));
  }

  // 此處與前一個if塊的邏輯幾乎相同，區別在於所調用的是onRejected函數，就不再做過多解釋
  if (self.status === ‘REJECTED‘) {
    return (promise2 = new Promise(function(resolve, reject) {
      try {
        var x = onRejected(self.data);
        if (x instanceof Promise) {
          x.then(resolve, reject);
        }
      } catch (e) {
        reject(e);
      }
    }));
  }

  if (self.status === ‘PENDING‘) {
    // 如果當前的Promise還處於pending狀態，我們並不能確定調用onResolved還是onRejected，
    // 只能等到Promise的狀態確定後，才能確實如何處理。
    // 所以我們需要把我們的**兩種情況**的處理邏輯做為callback放入promise1(此處即this/self)的回調數組裏
    // 邏輯本身跟第一個if塊內的幾乎一致，此處不做過多解釋
    return (promise2 = new Promise(function(resolve, reject) {
      self.onResolvedCallback.push(function(value) {
        try {
          var x = onResolved(self.data);
          if (x instanceof Promise) {
            x.then(resolve, reject);
          }
          resolve(x); // 否則，以它的返回值做為promise2的結果
        } catch (e) {
          reject(e);
        }
      });

      self.onRejectedCallback.push(function(reason) {
        try {
          var x = onRejected(self.data);
          if (x instanceof Promise) {
            x.then(resolve, reject);
          }
        } catch (e) {
          reject(e);
        }
      });
    }));
  }
};

// 為了下文方便，我們順便實現一個catch方法
Promise.prototype.catch = function(onRejected) {
  return this.then(null, onRejected);
};

Promise then中回調為什麽是異步執行？Promise執行機制問題