Promise then中回調爲何是異步執行？Promise執行機制問題

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

 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);
};