Axios 上的异步/等待

Question

所以这不是技术问题，而是更根本的问题。

async getBestServer() {
      await axios
        .get("https://api.gofile.io/getServer")
        .then((response) => {
          (this.server = response.data.data.server);
          console.log("on axios = " + this.server);
        })
        .catch((error) => console.log(error));
      console.log("on data = " + this.server);
    },

I tried to get a request on this go file api (its public so its ok), then i wanna store it on my data object, what i confuse here is what is actually async/await does in this function? 我所知道的是 await 会等待 axios 解决对数据的响应，然后运行下面的第二个控制台日志，但是如果我不使用 await 怎么办，为什么 javascript 不能等待 Z38C3787939C7B0B6C77D73FCED 先解决数据？ 我的意思是不是同步的工作原理吗？

如果你给我一个简单的解释，我很感激，而不仅仅是回答重定向到一篇文章，因为我已经阅读了很多文章，但仍然对我制作的 function 感到困惑。

谢谢。

Answer 1

async / await模式是您使用的 then/catch 的一种可读性强但防错的替代方案。

基本上，而不是写：

getBestServer() {
  axios
    .get("https://api.gofile.io/getServer")
    .then((response) => {
      (this.server = response.data.data.server);
      console.log("on axios = " + this.server);
    })
    .catch((error) => console.log(error));
  console.log("on data = " + this.server);
}

您可以使用async / await做同样的事情，但以类似命令的方式：

async getBestServer() {
  try {
    const response = await axios.get("https://api.gofile.io/getServer");
    this.server = response.data.data.server;
    console.log("on axios = " + this.server);
  }
  catch (error) {
    console.log(error)
  }
}

如您所见，在第一个片段中，最后一个console.log将在引发get时立即执行。 但是，由于 HTTP 请求需要一段时间（关于脚本执行），“等待”直到收到实际数据会变得混乱。

在第二个片段中，魔术await会为您“等待”。 更容易维护，更容易理解代码的作用，但由于脏代码导致的错误更少。

如果您需要级联两个或三个调用，则差异的清晰度会变得更大。

老式代码如下所示：

getBestServer() {
  axios
    .get("https://api.gofile.io/getServer")
    .then((response1) => {
      (this.server = response1.data.data.server);
      console.log("on axios = " + this.server);
      
      axios.get("https://another-service")
        .then(response2 => {
          console.log("second call served...")
        })
        .catch(error => console.log(error))
    })
    .catch((error) => console.log(error));
}

很乱，不是吗？

但是，您可以利用async / await ，这样就变成了：

async getBestServer() {
  try {
    const response1 = await axios.get("https://api.gofile.io/getServer");
    this.server = response.data.data.server;
    console.log("on axios = " + this.server);

    const response2 = await axios.get("https://another-service");
    console.log("second call served...")
  }
  catch (error) {
    console.log(error)
  }
}

奖励：毫不费力地捕获单个错误！

Answer 2

Javascript 是异步单线程，每当您向服务器发送请求时，它都必须等待，首先到达服务器然后从服务器获得应答，并且使该单线程等待将暂停整个过程。 因此，为了最大程度地减少等待时间的浪费，Javascript 在响应返回之前开始执行其他操作。 但是在某些情况下，您需要等待某些事情，在这种情况下，通过使用 await 标记 api 调用 Javascript 知道它首先需要等待响应，然后在该 ZC1C425268E68385D1AB5074C17A4 中移动到下一步。

Answer 3

尝试再次阅读文档，并尝试这样思考：

当您使用 async 关键字定义异步 function 时，您告诉 Javascript function 需要一些无法立即使用的数据。

Await 关键字是告诉 function 停止执行其后面的所有内容并在完成后继续执行的关键字。

async getBestServer() { // you said it is async function now function knows it will need some data that is not jet available
      await axios // you used await, and now function knows to stop doing until it gets the response
        .get("https://api.gofile.io/getServer")
        .then((response) => {
          (this.server = response.data.data.server);
          console.log("on axios = " + this.server);
        })
        .catch((error) => console.log(error));
      console.log("on data = " + this.server);
    },

我知道我告诉过你要再次阅读文档，但是如果你理解了我的解释，你应该会更清楚 async/await 的作用，并且你应该最终理解文档。