Promise.all возвращает пустые объекты

Я пытаюсь получить несколько объектов данных из базы данных Movie одновременно с помощью Promise.all. После того, как я просмотрел все результаты вызова fetch и использовал .json() для каждого бита данных, я попытался .json() его на консоль. Однако вместо массива объектов с данными я получаю массив 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));
  };

Ответ 1

Ваш .then(responses => responses.map(url => url.json())) преобразуется в массив Promises, поэтому вам нужно снова вызвать Promise.all если вы хотите дождаться разрешения всех:

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

Или вы могли бы рассмотреть возможность использования только одного Promise.all и иметь каждую fetch URL и 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));

Ответ 2

попробуйте сделать это таким образом

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