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

  • 相关阅读:
    硬盘任性丢数据,但分布式存储一定可靠吗?
    Service的基本组成
    固定cell.imageView.image的大小
    剪贴板服务
    取得正在运行的Activity
    取得正在运行的服务
    C#.NET学习笔记1---C#.NET简介
    取得手机的网络信息
    四、cocos2dx动画Animation介绍
    C#.NET学习笔记2---C#.第一个C#程序
  • 原文地址:https://www.cnblogs.com/wangxirui/p/11898910.html
Copyright © 2020-2023  润新知