Javascript 上的異步和等待功能

Question

我是 Javascript 新手。 我正在嘗試練習從 api 獲取數據。 如果我在函數中添加 async 和 await ，它會起作用。 但是，如果我從函數中取出 async 並 await 到普通函數，它將返回“TypeError：無法讀取屬性‘結果’。

我可以知道為什么它必須在此函數上添加 Async 和 await 嗎？

這是代碼：-

showMovieData()

async function showMovieData() {
  const api_key = '8c9718c0155061bbd9ae76ee62386c65';
  // /discover/movie?sort_by=popularity.desc

  var result = await axios.get(
    "https://api.themoviedb.org/3/discover/movie?api_key=8c9718c0155061bbd9ae76ee62386c65&sort_by=popularity.desc"
  )

  result = result.data.results;
  console.log(result)

Answer 1

首先也是最重要的：不要在公共論壇上共享密鑰。

其次，你必須等待它的原因是你的函數是異步的。 如果你不等待 get 請求，你的代碼將繼續到下一行，不管它是否從 API 得到響應，這意味着如果它沒有收到響應，那么就沒有“數據”屬性可言. 這是響應 API 在發回結果時為您設置的屬性。 它不像現代編程那樣與 Javascript 相關。

Answer 2

除了 Amar 的回答，我想補充一點

首先，您需要了解異步性。 想象一下，我和我的朋友交談，這是對話：

我：嘿，你能把昨晚聚會的那個女孩的電話號碼發給我嗎？

朋友：好的，我回家發給你

在他把號碼發給我之前，我試着給她打電話。

沒有道理吧？ 所以同樣的邏輯在這里也適用。

async和await關鍵字意味着在執行下一行代碼之前應該發生一些事情。

所以如果你真的想理解這個異步的概念，你應該學習高階函數、回調函數、 promises ，然后是async&await

我添加了不同的來源，您可以隨意閱讀您想要的任何來源的所有主題，它們都很棒。