在JavaScript的map函数中使用Async/Await和Fetch时，未按顺序执行。

Question

我正在使用 TMDB API 进行编程，但在获取响应并按顺序设置状态时遇到了问题。

我有三个列表需要映射。每个列表中都有电影，我也需要映射以获取 TMDB ID。然后，我会获取所需的值并设置状态。在理想情况下，状态将按照调用映射函数的顺序设置。

由于该 API 仅允许每个请求一个ID，因此这是我的解决方案。我知道我错过了一些明显的东西，但对此的任何指导将不胜感激！

  fetchMoviesFromTMDB = async () => {
    const TMDb_access_key = TMDB_API_KEY;

    await this.props.dashboard.items[0].fields.lists.map(async list =>
      list.fields.movies.map(async (movie, index) => {
        try {
          const tmdbRes = await fetch(
            `https://api.themoviedb.org/3/movie/${
              movie.fields.tmDbMovieId
            }?api_key=${TMDb_access_key}&append_to_response=credits,releases`
          );
          const TMDB = await tmdbRes.json();

          await this.setState({
            allMovies: [
              ...this.state.allMovies,
              [
                movie.fields.path,
                TMDB.poster_path,
                movie.fields.movieTitle,
                index,
              ],
            ],
          });
        } catch (err) {
          console.log(err);
        }
      })
    );
  };

- tporter

Answer 1

你需要了解Promise.all，它可以按顺序执行一组 Promise，正好符合你的要求。

只需将你的 Promise 数组发送给它，如果你想对其结果进行任何其他操作，就等待它的结果即可：

await Promise.all(this.props.dashboard.items[0].fields.lists.map(async list =>
    list.fields.movies.map(async (movie, index) => {
        try {
            const tmdbRes = await fetch(
                `https://api.themoviedb.org/3/movie/${
                movie.fields.tmDbMovieId
                }?api_key=${TMDb_access_key}&append_to_response=credits,releases`
            );
            const TMDB = await tmdbRes.json();

            await this.setState({
                allMovies: [
                    ...this.state.allMovies,
                    [
                        movie.fields.path,
                        TMDB.poster_path,
                        movie.fields.movieTitle,
                        index,
                    ],
                ],
            });
        } catch (err) {
            console.log(err);
        }
    })
));

- Treycos