javascript - Promise.all 返回空对象

Question

我正在尝试使用 Promise.all 一次从电影数据库中获取多个数据对象。在我遍历 fetch 调用的所有结果并对每一位数据使用 .json() 之后，我尝试将其记录到控制台。但是，我得到的不是一组包含数据的对象，而是一组 Promises。嵌套在 promises 中，我可以看到我的数据，但我显然缺少一个步骤来拥有一组数据对象，而不仅仅是 Promises。

我在这里错过了什么？

 //store movie API URLs into meaningful variables
    const trending = `https://api.themoviedb.org/3/trending/all/day?api_key=${API_KEY}`;
    const topRated = `https://api.themoviedb.org/3/movie/top_rated?api_key=${API_KEY}&language=en-US&page=1`;
    const nowPlaying = `https://api.themoviedb.org/3/movie/now_playing?api_key=${API_KEY}&language=en-US&page=1`;
    const upcoming = `https://api.themoviedb.org/3/movie/upcoming?api_key=${API_KEY}&language=en-US&page=1`;
    //create an array of urls to fetch data from
    const allMovieURLs = [trending, topRated, nowPlaying, upcoming];
    const promiseURLs = allMovieURLs.map(url => fetch(url));
    Promise.all(promiseURLs)
      .then(responses => responses.map(url => url.json()))
      .then(dataArr => console.log(dataArr));
  };

Answer 1

您的 .then(responses => responses.map(url => url.json())) 解析为 Promise 数组，因此您需要调用 Promise.all 再次如果你想等待所有解决:

Promise.all(promiseURLs)
  .then(responses => Promise.all(responses.map(url => url.json())))
  .then(dataArr => console.log(dataArr));

或者，您可能会考虑只使用一个 Promise.all，并让每个 URL fetch 和 json，这样一些项目是' 在脚本执行过程中空闲:

const allMovieURLs = [trending, topRated, nowPlaying, upcoming];
const promiseURLs = allMovieURLs.map(url => fetch(url).then(res => res.json()));
Promise.all(promiseURLs)
  .then(dataArr => console.log(dataArr));