Question

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

关于此函数的执行方式，这是我的伪代码（请在这里告诉我是对还是错）：

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

第3步是我有一些问题...假设我在一个非常糟糕的网络上，并且我的提取请求在5秒钟内没有提供我的数据。到那时，由于异步功能允许console.log(data)在获取数据之前运行，我的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)语句中获取提取的数据的原因。

为什么这个异步函数没有抛出未定义的？

1 个答案: