使用Async/Await的事件循环流程

Question

我一直在用Javascript中的Async/Await命令进行试验,并发现了一些我很困惑的事情.

当我在调试模式下在Visual Studio代码中运行以下代码时,在我到达第一个'await'代码行后,它跳转到函数的末尾,然后继续顺序执行其余代码,包括其他'await'行.为什么是这样？

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();

这是jsfiddle中的代码.

这是我正在谈论的动画GIF.

Answer 1

它可能表示函数返回承诺的点。如果您在调用之后包含一些其他代码，则在事件循环的未来轮次async function之后继续执行之前将逐步执行这些代码。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) 之间。