最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Promise.all returning empty objects - Stack Overflow

programmeradmin2浏览0评论

I'm trying to get multiple data objects from The Movie Database at once using Promise.all. After I loop through all the results of the fetch call, and use .json() on each bit of data, I tried to log it to the console. However, rather than an array of objects with data, I'm getting an array of Promises. Nested in the promises, I can see my data, but I'm clearly missing a step in order to have an array of data objects, instead of just Promises.

What am I missing here?

 //store movie API URLs into meaningful variables
    const trending = `=${API_KEY}`;
    const topRated = `=${API_KEY}&language=en-US&page=1`;
    const nowPlaying = `=${API_KEY}&language=en-US&page=1`;
    const upcoming = `=${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));
  };

I'm trying to get multiple data objects from The Movie Database at once using Promise.all. After I loop through all the results of the fetch call, and use .json() on each bit of data, I tried to log it to the console. However, rather than an array of objects with data, I'm getting an array of Promises. Nested in the promises, I can see my data, but I'm clearly missing a step in order to have an array of data objects, instead of just Promises.

What am I missing here?

 //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));
  };
Share Improve this question asked Feb 24, 2019 at 9:15 WonkasWillyWonkasWilly 5731 gold badge8 silver badges23 bronze badges 3
  • 3 It's not the problem, but that code makes two common mistakes that may hit you at some point. 1. You're not checking that the requests succeed. This is such a common error (in my view, an error in the fetch API) that I wrote it up on my anemic little blog. Check .ok on the responses. 2. You're not handling rejection of your Promise.all promise, and not passing it to something that will handle it. You need to either handle it or pass the promise on to something that will. – T.J. Crowder Commented Feb 24, 2019 at 14:31
  • closely related: Why does .json() return a promise? – Bergi Commented Feb 24, 2019 at 15:19
  • 1 @T.J.Crowder This is an awesome addition to a problem I didn't even know I was having. Much appreciated! – WonkasWilly Commented Feb 25, 2019 at 6:47
Add a comment  | 

2 Answers 2

Reset to default 19

Your .then(responses => responses.map(url => url.json())) resolves to an array of Promises, so you need to call Promise.all again if you want to wait for all to resolve:

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

Or, you might consider using just one Promise.all, and having each URL fetch and the json, that way some items aren't idle in the middle of script execution:

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

try doing it this way

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

评论列表(0)

  1. 暂无评论