使用async和await与axios配合使用

Question

我对异步和等待技术还不是很熟悉，但我知道它可以让我们以同步的方式编写代码（虽然在幕后是异步的，只是在代码中以同步的方式呈现）。

下面是我想要以异步方式完成的代码：

const axios = require("axios");
async function getJSONAsync(){
  // The await keyword saves us from having to write a .then() block.
  let json = await axios.get('https://tutorialzine.com/misc/files/example.json');
  console.log('after the call to service');
  // The result of the GET request is available in the json variable.
  // We return it just like in a regular synchronous function.
  return json;
}

let abc = getJSONAsync();
console.log('>>>>>>>>>>> abc', abc);

现在有一些查询我无法破解，让我们先看输出：

>>>>>>>>>>> abc Promise { <pending> }
after the call to service

1. 在调用服务后，这行代码出现在执行之后。为什么？async-await的行为发生了什么变化？

请分享一些看法。

提前感谢，祝编码愉快 :）。

- Ankur Verma

Answer 1

你需要在另一个async函数中使用await调用getJSONAsync：

async function main() {
    let abc = await getJSONAsync();
    console.log(abc);
    // ...
}

 main();

或者调用它并等待返回的 promise 解析（即使用 Promise.prototype.then）

- fardjad

---

那么我该如何使用另一个async await调用主函数？ - Ankur Verma

我想以同步方式获取响应，就像让 a = getData(b); 然后将其用于进一步使用？ - Ankur Verma

在发布的代码片段中，main 是一个异步函数。在 main 函数内部，您可以使用 await 来调用异步函数，其语法类似于调用同步函数。 - fardjad

Answer 2

好的，在深入了解异步等待的魔法后，我发现如果你只是想尝试一些东西来检查，最好以这种方式进行：

const axios = require("axios");
async function getJSONAsync(){
  let json = await axios.get('https://tutorialzine.com/misc/files/example.json');
  console.log('after the call to service');
  return json;
}

(async()=>{
   let abc = await getJSONAsync();
   console.log('>>>>>>>>>>> abc', abc);
})();

我这里创建了一个异步匿名函数，它在创建后立即被调用。如果有任何疑问，请告诉我。

顺便提一下：这实际上是一种立即调用的函数表达式（IIFE）。

- Ankur Verma

Answer 3

当你遇到异步调用时，程序的控制权会返回到调用方法，直到异步调用完成。

因此，在你的情况下，你调用异步方法，它发送一个异步请求来获取资源，并返回到先前（在调用堆栈上）的方法。 在那个方法中，你尝试记录abc，但此时仍在获取资源，因此只会打印一个待处理的promise。 当异步调用最终完成时，控制权将返回到你的getJSONAsync()方法，并在那里打印消息。

- Hentov

Answer 4

你将异步函数的结果绑定到变量上，然后记录该变量，此时该变量是未解决的 Promise。当您从请求中获取响应时，第二个 console.log 就会出现。

回答您的问题，async/await 行为仅适用于异步函数内部，而不适用于调用此函数的代码的其他部分等。

- simka