為什么這個異步函數沒有拋出未定義的？

Question

我有一個非常簡單的異步函數，該函數調用訪存api，並帶回一些數據。 我在此函數中使用了兩次await關鍵字，然后獲取該數據並將其推入組件狀態。

這是關於此函數的執行方式的偽代碼（請在這里告訴我是對還是錯）：

1. 使用await調用fetch api：這將使其余代碼繼續到下一行。
2. 獲取獲取響應流后，將其放入data變量中。 同樣，在我們等待這種情況發生時，代碼可以繼續。
3. 將數據記錄到控制台。

第3步是我有一些疑問的地方...假設我在一個非常糟糕的網絡上，並且我的提取請求在5秒鍾內都沒有提供我的數據。 那時，由於異步功能允許console.log(data在我取回數據之前運行，所以我的console.log(data)行不應該拋出未定義並執行catch塊嗎？

我通過進入Chrome Web開發者控制台進行了測試，然后選擇了“慢速3g”連接。 即使使用該網絡，我也可以將數據記錄到控制台，而不會拋出undefined 。

我要做的是確保在我取回數據對象后立即有數據要推入狀態 。

 getMovieDetails = async id => {
    const API_KEY = process.env.REACT_APP_API_KEY;
    const movieId = id;
    const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${API_KEY}&language=en-US`;
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
      this.setState({
        title: data.title,
        poster: data.poster_path
      });
    } catch (err) {
      console.log(`Couldn't fetch the endpoint!`);
      console.log(err);
    }
  };

Answer 1

您在偽代碼的第一點上錯了

使用await調用獲取API：這將使您的其余代碼繼續到下一行。

其實沒有 await將阻止async功能中下一行的執行。

所以，

yourAsyncFunction = async () => {
  await doSomething();
  console.log('done something') // Will not run until doSomething() gets completed
}

這就是為什么您總是在console.log(data)語句中獲取提取的數據的原因。