Promise.all 返回空对象答案

【问题标题】：Promise.all returning empty objectsPromise.all 返回空对象
【发布时间】：2019-07-17 22:13:26
【问题描述】：

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

【问题讨论】：

这不是问题所在，但该代码会犯两个可能会在某些时候影响您的常见错误。 1.您没有检查请求是否成功。这是一个常见的错误（在我看来，fetch API 中的一个错误）我在我贫血的小博客上wrote it up。检查回复中的.ok。 2. 你没有处理对你的Promise.all 承诺的拒绝，也没有将它传递给可以处理它的东西。您需要处理它或将承诺传递给将要处理的东西。
密切相关：Why does .json() return a promise?
@T.J.Crowder 这是对我什至不知道自己遇到的问题的一个很棒的补充。非常感谢！

标签： javascript

【解决方案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));

【讨论】：

我没有意识到Body.json 也返回了Promise！您的解释简单明了，这解决了我的问题。谢谢。
可能值得指出缺少的.ok 检查（我现在在对问题的评论中这样做了）。

【解决方案2】：

试试这个方法

const promiseURLs = allMovieURLs.map(url => fetch(url).then(res => res.json()));
Promise.all(promiseURLs)
  .then(responses => responses.forEach(response => { console.log(response)})

【讨论】：