微任务顺序和课程里面不一样？

Question

就是这个题目，课程里讲的，先执行‘async1 end’，再执行’promise2’。但我这边执行全部代码后，先执行了’promise2’，再执行‘async1 end’。我确定没写错代码。所以这是为啥？

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')
})

console.log('script end')

Answer 1

几盎丶 2022-03-03 22:15:18

可能和你的浏览器版本有关，我最近也在学，读了一篇文章，最新的chrome对async/await进行了优化。

即对await 的下一行代码，等同于下面一行

return RESOLVE(p).then(()=>{
    ```await```以下的代码
})

而代码中的『RESOLVE(p)』接近于『Promise.resolve(p)』，不过有微妙而重要的区别：p 如果本身已经是 Promise 实例，Promise.resolve 会直接返回 p 而不是产生一个新 promise。

具体可以看这个链接

https://www.zhihu.com/question/268007969

• 提问者 薄樱猫猫 #1

  顺着你给的链接，查到这个和浏览器和运行环境有关系。。我了启动一个vue项目，把题目的代码写成方法在created()调用，顺序和课程一样。。代码直接放在控制台输出，就和我的问题里面一样。我截图放上面了

Answer 2

双越 2022-03-03 19:52:29

我不知道你那儿为啥是这个顺序。

我把你的代码拷贝，执行，顺序是这样的，如下图：

• 提问者 薄樱猫猫 #1

  这个和浏览器和运行环境有关系。。我了启动一个vue项目，把题目的代码写成方法在created()调用，顺序和课程一样。。代码直接放在控制台输出，就和我的问题里面一样。我截图放上面了
  
  https://www.zhihu.com/question/268007969
  https://www.zhihu.com/question/270515346
  这俩讲解了这个问题。。不过基本给我讲懵了。。。