Promise執行順序（下）

如下代碼執行順序

const first = () =>
    // Promise1
    new Promise((resolve, reject) => {
        resolve(2);
        console.log(3);
        // Promise2
        let p = new Promise((resolve, reject) => {
            console.log(7);
            setTimeout(() => {
                console.log(5);
                resolve(6);
            }, 0);
        })
        // Promise3
        p.then(arg => {
            console.log(arg);
        })
    })
first()
    // Promise4
    .then(arg => {
        console.log(arg);
    })
console.log(4);
複製代碼

• 答案 3 7 4 2 5 6

源碼分析

1. Promise1
2. 執行resolve(2);

Promise1 = {
    this.state = 'FULFILLED'; 
    this.queue = [];
    this.outcome = 2;
}
複製代碼

2. Promise2

Promise2 = {
    this.state = 'PENDING';
    this.queue = [];
    this.outcome = void 0;
}
複製代碼

3. Promise3

Promise3 = {
    this.state = 'FULFILLED'; 
    this.queue = [];
    this.outcome = void 0;
}
複製代碼

4. 執行then

Promise.prototype.then = function (onFulfilled, onRejected) {
  if (typeof onFulfilled !== 'function' && this.state === FULFILLED ||
    typeof onRejected !== 'function' && this.state === REJECTED) {
    return this;
  }
  var promise = new this.constructor(INTERNAL);
  // this.state === PENDING
  // 只有當state的狀態不等於PENDING，纔會進入微任務隊列，不然進入本身的隊列
  if (this.state !== PENDING) {
    var resolver = this.state === FULFILLED ? onFulfilled : onRejected;
    unwrap(promise, resolver, this.outcome);
  } else {
    // 此時執行這裏
    this.queue.push(new QueueItem(promise, onFulfilled, onRejected));
  }

  return promise;
};
複製代碼

5. Promise3

Promise3 = {
    this.state = 'FULFILLED'; 
    // 1個QueueItem
    this.queue = [{
        callFulfilled: ƒ (value)
        onFulfilled: arg => { console.log(arg); }
        promise: Promise {
            state: ["PENDING"]
            queue: [],
            outcome: undefined
        }
    }];
    this.outcome = void 0;
}
複製代碼

6. Promise4

Promise4 = {
    this.state = 'FULFILLED'; 
    this.queue = [];
    this.outcome = void 0;
}
複製代碼

7. 執行resolve(6);

function onSuccess(value) {
    if (called) {
      return;
    }
    called = true;
    handlers.resolve(self, value);
}
複製代碼

8. 執行handlers.resolve

• self = Promise3

handlers.resolve = function (self, value) {
  var result = tryCatch(getThen, value);
  if (result.status === 'error') {
    return handlers.reject(self, result.value);
  }
  var thenable = result.value;

  if (thenable) {
    safelyResolveThenable(self, thenable);
  } else {
    self.state = FULFILLED;
    self.outcome = value;
    var i = -1;
    var len = self.queue.length;
    while (++i < len) {
      // 取出本身的隊列來執行
      self.queue[i].callFulfilled(value);
    }
  }
  return self;
};
複製代碼

9. QueueItem

function QueueItem(promise, onFulfilled, onRejected) {
  this.promise = promise;
  if (typeof onFulfilled === 'function') {
    this.onFulfilled = onFulfilled;
    // callFulfilled = otherCallFulfilled
    this.callFulfilled = this.otherCallFulfilled;
  }
  if (typeof onRejected === 'function') {
    this.onRejected = onRejected;
    this.callRejected = this.otherCallRejected;
  }
}
複製代碼

10. otherCallFulfilled

QueueItem.prototype.otherCallFulfilled = function (value) {
  // 加入微任務隊列
  unwrap(this.promise, this.onFulfilled, value);
};
複製代碼

11. unwrap便是immediate
12. 執行微任務隊列