Js中async/await的执行顺序详解

前言 虽然大家知道async/await，但是很多人对这个方法中内部怎么执行的还不是很了解，本文是我看了一遍技术博客理解 JavaScript 的 async/await（如果对async／await不熟悉可以先看下这篇文章）后拓展了一下，我理了一下await之后js的执行顺序，希望可以给别人解疑答惑，先简单介绍一下async／await。 async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。 async/await 是建立在 promise 的基础上。 async/await 像 promise 一样，也是非阻塞的。 async/a 在JavaScript中，`async/await`是处理异步操作的一种优雅方式，它使得异步代码看起来更加接近同步代码，提高了代码的可读性和可维护性。`async/await`是基于Promise构建的，因此理解Promise的基本概念对于掌握`async/await`至关重要。 我们来看`async`函数。`async`关键字用来定义一个异步函数，它总是返回一个Promise对象。当在`async`函数中使用`return`语句时，无论返回的是不是Promise，都会被自动封装成一个Promise。例如： ```javascript async function testAsync() { return "hello async"; } let result = testAsync(); // 输出: Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "hello async"} ``` 如果`async`函数没有明确的返回值，那么它会返回一个解决（fulfilled）状态的Promise，其`PromiseValue`为`undefined`： ```javascript async function testAsync1() { console.log("hello async"); } let result1 = testAsync1(); // 输出: "hello async", Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined} ``` `await`关键字用于等待一个Promise的结果。当遇到`await`时，当前`async`函数会暂停执行，并将控制权交还给调用者，直到等待的Promise完成（即解决或拒绝）。`await`后面的表达式必须是一个Promise，否则会抛出错误。然而，`await`并不会阻塞JavaScript的执行，而是使得异步操作变得同步化，因为它会将后续的代码放入微任务（microtask）队列中，等待当前执行上下文（event loop）的其他任务完成后才执行。 下面是一个示例，展示了`async/await`的执行顺序： ```javascript function testSometing() { console.log("执行testSometing"); return "testSometing"; } async function testAsync() { console.log("执行testAsync"); return Promise.resolve("hello async"); } async function test() { console.log("test start..."); const v1 = await testSometing(); // 关键点1 console.log(v1); const v2 = await testAsync(); // 关键点2 console.log(v2); console.log(v1, v2); } test(); var promise = new Promise((resolve) => { console.log("promise start.."); resolve("promise"); }); // 关键点3 promise.then((val) => console.log(val)); console.log("test end..."); ``` 输出结果： ``` test start... 执行testSometing promise start.. test end... testSometing 执行testAsync promise hello async testSometing hello async ``` 在这个例子中，当`test()`函数运行到`await testSometing()`时，`testSometing`立即执行并打印"执行testSometing"，然后由于`await`，`test()`函数的执行暂停，控制权交给后续的代码。此时，`promise`开始执行并打印"promise start.."，然后`then`回调被添加到宏任务（macrotask）队列中。当所有同步代码执行完毕，包括`console.log("test end...")`，事件循环开始处理宏任务，触发`promise.then`回调，打印"promise"。接着，事件循环检查微任务队列，发现`test`函数中`await`的Promise已经解决，于是继续执行`test`函数的剩余部分，依次打印"hello async"，"testSometing"和"hello async"。 `async/await`提供了一种编写更易读的异步代码的方式。`async`函数返回一个Promise，而`await`关键字使得我们可以在异步代码中使用同步风格的写法，等待Promise的结果，而不会阻塞主线程。这种机制结合了Promise和微任务的概念，让异步流程控制变得更加简洁。理解`async/await`的执行顺序对于编写复杂的异步逻辑至关重要。