为什么这个异步函数没有抛出undefined？

Question

我有一个非常简单的异步函数调用fetch api，并带回一些数据。我在这个函数中使用await关键字2次，然后获取该数据并将其推入组件状态。

这是关于这个函数如何执行的伪代码（请告诉我这里是对还是错）：

1. 使用await调用fetch api：这允许代码的其余部分继续到下一行。
2. 获取响应流后，将其放入data变量中。同样，代码可以在我们等待这种情况发生时继续。
3. 将数据记录到控制台。

第3步是我有一些问题...让我说我的网络非常糟糕，我的获取请求不会给我5秒钟的数据。那时，我的console.log(data)行不应该抛出undefined，并执行catch块，因为异步函数允许console.log(data运行之前我获取我的获取数据？

我通过进入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调用fetch api：这允许你的其余代码继续到下一行。

实际上，没有。 await将阻止执行async函数中的下一行。

所以，

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

这就是为什么你总是在你的console.log(data)声明中获取所获取的数据。