Question

我一直在尝试使用Javascript中的Async / Await命令，并注意到我对此感到困惑。

当我在调试模式下在Visual Studio代码中运行以下代码时，在我到达第一个'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();

这是code in jsfiddle。

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

Answer 1

它可能表示函数返回promise的点。如果在调用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）之间发生。

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

1 个答案: