javascript - 使用 Async/Await 的事件循环流

Question

我一直在尝试使用 Javascript 中的 Async/Await 命令并注意到一些让我感到困惑的事情。

当我在 Debug模式下在 Visual Studio Code 中运行以下代码时，在我到达第一行“等待”代码后，它跳转到函数的末尾，然后继续按顺序执行其余代码，包括其他 '等待'线。为什么是这样？

const axios = require("axios");
const apiURL = 'https://jsonplaceholder.typicode.com/posts/1'

async function multipleRequestsAsync() {
  try {
    console.log("starting...")
    const response1 = await axios.get(apiURL);
    console.log(response1.data);
    const response2 = await axios.get(apiURL);
    console.log(response2.data);
    const response3 = await axios.get(apiURL);
    console.log(response3.data);
  } catch (error) {
    console.error(error);
  }
}

multipleRequestsAsync();

这是 code in jsfiddle .

这是我正在谈论的动画 gif。

Answer 1

它可能表示函数返回 promise 的时间点。如果您在调用 async 函数 之后包含一些其他代码，那么在事件循环的 future 轮次中 await 之后继续执行之前，这些代码将被逐步执行。考虑

async function multipleRequestsAsync() {
  try {
    console.log("starting...");                // 3
    const response1 = await axios.get(apiURL); // 4
    console.log("done");                       // 7
  } catch (error) {
    console.error(error);
  }
}                                              // 5

console.log("before start");                   // 1
const promise = multipleRequestsAsync();       // 2
console.log("continuing...");                  // 6

你会得到输出

before start
starting...
continuing
// later:
done

函数 (5) 末尾的断点将出现在将函数留在 await (4) 和调用后的语句 (6) 之间。