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 的作用，並且你應該最終理解文檔。