await表达式的执行顺序问题

urnotwangPder

于 2023-07-04 01:43:22 发布

阅读量767

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/urnotwang/article/details/131526594

版权

文章探讨了在JavaScript中，当同步代码和异步代码（使用await操作符与Promise结合）一起出现时，它们的执行顺序。首先会执行所有同步代码，然后才会执行异步代码。在给定的示例中，同步代码如console.log(1111)和console.log(5555)先执行，接着是await后面的Promise.resolve()返回的异步操作，最后输出剩余的同步代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

await表达式的执行顺序问题

结论：如果有同步代码和异步代码同时出现，一定是先执行同步，再执行异步

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
      结论：如果有同步代码和异步代码同时出现，一定是先执行同步，再执行异步
   -->
  <script>
    async function main() {
      console.log(1111)
      let res = await Promise.resolve('ok')
      console.log(res);
      console.log(2222);
      console.log(3333);
      console.log(4444);
      let res1 = await Promise.resolve('okk')
      console.log(res1);
      console.log(6666);
      console.log(7777);
    }
    // 调用
    main()
    console.log(5555);
    // 输出顺序为 1111 5555 ok 2222 3333 4444 okk 6666 7777
  </script>
</body>

</html>