账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    async await 和 promise微任务执行顺序问题
    28
    0

    问题描述

    今天看到一个关于js执行顺序的问题,不太了解async awite中awite后的代码的执行时机

    • 问题1. 为啥promise2、promise3输出比async1 end输出早?如果都是微任务的话,不是async1 end先加入微任务队列的吗?
    • 问题2. 为什么async1 end又先于promise4输出呢?

    相关代码

    async function async1(){
      console.log('async1 start')
      await async2()
      console.log('async1 end')
    }
    async function async2(){
      console.log('async2')
    }
    console.log('script start')
    setTimeout(function(){
      console.log('setTimeout') 
    },0)  
    async1();
    new Promise(function(resolve){
      console.log('promise1')
      resolve();
    }).then(function(){
      console.log('promise2')
    }).then(function() {
      console.log('promise3')
    }).then(function() {
      console.log('promise4')
    }).then(function() {
      console.log('promise5')
    }).then(function() {
      console.log('promise6')
    }).then(function() {
      console.log('promise7')
    }).then(function() {
      console.log('promise8')
    })
    console.log('script end')

    chrome 70.0.3538.102 结果

    script start
    async1 start
    async2
    promise1
    script end
    promise2 // 与 chrome canary 73 不一致
    promise3 // 与 chrome canary 73 不一致
    async1 end // 与 chrome canary 73 不一致
    promise4
    promise5
    promise6
    promise7
    promise8
    setTimeout

    Chrome canary 73.0.3646.0(同node8.12.0):

    script start
    async1 start
    async2
    promise1
    script end
    async1 end // 与 chrome 70 不一致
    promise2 // 与 chrome 70 不一致
    promise3 // 与 chrome 70 不一致
    promise4
    promise5
    promise6
    promise7
    promise8
    setTimeout
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 泪未流〃心先碎 普通会员 1楼

      在JavaScript中,async/await和Promise是两种常用的异步编程技术。

      1. Promise:Promise是一种处理异步操作的构造函数。Promise有两种状态:pending(等待中)和fulfilled(已完成)。当一个Promise被await时,它会立即返回,然后将Promise的resolve或reject方法设置为相应的值。

      示例: ```javascript let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('Hello World'); }, 1000); });

      console.log(promise); // Output: Promise {then: function(), reject: function()} ```

      1. async/await:async/await是Promise的一个扩展,它允许我们使用同步代码块,来编写异步代码。await关键字用于等待异步操作完成,而async关键字则用于定义一个函数是异步的。

      示例: ```javascript async function sayHello() { let message = 'Hello World'; await new Promise((resolve, reject) => { setTimeout(() => { resolve(message); }, 1000); }); }

      sayHello(); // Output: Hello World ```

      关于async/await的执行顺序,通常情况下,async函数的执行顺序是按照Promise的状态顺序,从fulfilled开始,然后是pending,最后是rejected。如果一个Promise有多个then方法,那么它们的执行顺序是按照then方法的顺序进行的。

      但是,这种执行顺序可能会受到多种因素的影响,包括异步函数的执行顺序、回调函数的执行顺序、Promise的状态改变顺序等。在实际开发中,我们需要根据具体的情况来确定异步函数的执行顺序和回调函数的执行顺序。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部