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

  • 相关阅读:
    TestNG:org.openqa.selenium.firefox.NotConnectedException: Unable to connect
    Python 程序员经常犯的 10 个错误
    python爬虫框架scrapy实例详解
    使用python进行汉语分词
    Python监控日志程序
    用Python读取excel中的数据
    Python 文件处理
    10 款最好的 Python IDE
    自动化测试代码架构浅谈
    Robotium如何向下拖动屏幕
  • 原文地址:https://www.cnblogs.com/wangxirui/p/11898910.html
Copyright © 2020-2023  润新知