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));