關於promise為什么要使用微任務

首先我們先簡略的寫一個promise的內部執行的大致原理

function Bromise(executor) {
  // 成功隊列
  var resolveQueue = []
  // 失敗隊列
  var rejectQueue = []
  this.then = function(onResolve) {
    resolveQueue.push(onResolve)
  }
  this.catch = function(onReject) {
    rejectQueue.push(onReject)
  }
  function resolve(value) {
    console.log(resolveQueue.length)
    // 循環執行成功隊列里面的回調函數
    while(true) {
      let resolve = resolveQueue.shift()
      if(resolve) {
        // 直接執行不使用微任務時
        resolve(value)
        return true
      } else {
        return false
      }
    }
  }
  function reject(value) {
    while(true) {
      let reject = rejectQueue.shift()
      if(reject) {
        reject(value)
        return true
      } else {
        return false
      }
    }
  }
  executor(resolve, reject)
}
let promise = new Bromise((resolve, reject) => {
  resolve(100)
})
promise.then((value) => {
  console.log(value)
})

此時打印出來的console.log(resolveQueue.length)結果為0

因此不使用微任務直接執行的話會導致resolve(100)在執行的時候.then還未執行導致成功隊列沒有執行.push所以成功隊列長度為0

---

function Bromise(executor) {
  // 成功隊列
  var resolveQueue = []
  // 失敗隊列
  var rejectQueue = []
  this.then = function(onResolve) {
    resolveQueue.push(onResolve)
  }
  this.catch = function(onReject) {
    rejectQueue.push(onReject)
  }
  function resolve(value) {
    setTimeout(() => {
      // 使用setTimeout模仿微任務執行順序
      console.log(resolveQueue.length)
      // 循環執行成功隊列里面的回調函數
      while(true) {
        let resolve = resolveQueue.shift()
        if(resolve) {
          resolve(value)
          return true
        } else {
          return false
        }
      }
    }, 0)
  }
  function reject(value) {
    while(true) {
      let reject = rejectQueue.shift()
      if(reject) {
        reject(value)
        return true
      } else {
        return false
      }
    }
  }
  executor(resolve, reject)
}
let promise = new Bromise((resolve, reject) => {
  resolve(100)
})
promise.then((value) => {
  console.log(value)
})

此時打印的length為1

 

所以promise之所以要使用微任務是由Promise回調函數延遲綁定技術導致的