关于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回调函数延迟绑定技术导致的