Javascript 如何将从承诺中获取的数据存储回具有相同密钥的对象中？

标题有点模棱两可，但我会解释

我正在调用电影数据库中的4个不同URL。 一旦这些获取调用检索到数据，它将

setState

并更新我的初始状态。但是，在检索到所有数据之前，我不希望加载我的页面，因此我正在使用

Promise.all

（或尝试）

我的代码到目前为止

  state = {
    movies: {
      trending: {},
      topRated: {},
      nowPlaying: {},
      upcoming: {},
     },
  };




 const allMovieURLs = {
      trending: `https://api.themoviedb.org/3/trending/all/day?api_key=${API_KEY}`,
      topRated: `https://api.themoviedb.org/3/movie/top_rated?api_key=${API_KEY}&language=en-US&page=1`,
      nowPlaying: `https://api.themoviedb.org/3/movie/now_playing?api_key=${API_KEY}&language=en-US&page=1`,
      upcoming: `https://api.themoviedb.org/3/movie/upcoming?api_key=${API_KEY}&language=en-US&page=1`
    };

//initialize an empty array to Promise.all on
const promiseArr = [];

//loop through movie URLs, call fetch + json()
for (const movies in allMovieURLs) {
  //create an object that directly describes the data you get back from the url with a key
  const obj = {
    [movies]: fetch(allMovieURLs[movies]).then(res => res.json())
  };
  //push that object into an array so you can use Promise.all
  promiseArr.push(obj);

现在我这里有一个对象数组（

promiseArr

），其中存储了正确的键和正确的

Promise

我的下一个计划是调用

Promise.all

，但我需要一系列的承诺。从URL调用中获取实际数据后，我想将它们存储回对象中，并保存到正确的对应键

---

我已经被困在这一部分几个小时了…任何提示都将不胜感激

您可以使用

async/await

和

Object.entries（）

将JavaScript普通对象转换为键、值对数组

(async() => {
  for (const [movie, url] of Object.entries(allMovieURLs)) {
    try {
      allMovieURLs[movie] = await fetch(url).then(res => res.json())
                                  .catch(e => {throw e})
    } catch(e) {
        console.error(e)
    }
  }
})()

---

您可以使用

async/await

和

Object.entries（）

将JavaScript普通对象转换为键、值对数组

(async() => {
  for (const [movie, url] of Object.entries(allMovieURLs)) {
    try {
      allMovieURLs[movie] = await fetch(url).then(res => res.json())
                                  .catch(e => {throw e})
    } catch(e) {
        console.error(e)
    }
  }
})()

---

添加到promise数组时不要调用then。取而代之的是把它称为承诺

const trending = fetch(trending);
...

Promise.all([trending, topRated, nowplaying, upcoming]).then(([trending, topRated, nowplaying, upcoming]) => {
   movies.trending = trending.json();
   ....
});

---

添加到promise数组时不要调用then。取而代之的是把它称为承诺

const trending = fetch(trending);
...

Promise.all([trending, topRated, nowplaying, upcoming]).then(([trending, topRated, nowplaying, upcoming]) => {
   movies.trending = trending.json();
   ....
});

---

您也可以将承诺本身存储在另一个数组中

函数fetch（）{
var time=Math.random（）*1E3；
返回新承诺（功能（res、rej）{
setTimeout（函数（）{
res（时间）；
}，时间）；
});
}
const API_KEY=“”；
const allMovieURLs={
趋势：`https://api.themoviedb.org/3/trending/all/day?api_key=${API_KEY}`，
高估：`https://api.themoviedb.org/3/movie/top_rated?api_key=${API\u KEY}&language=en-US&page=1`，
正在播放：`https://api.themoviedb.org/3/movie/now_playing?api_key=${API\u KEY}&language=en-US&page=1`，
即将到来的：`https://api.themoviedb.org/3/movie/upcoming?api_key=${API_KEY}&language=en-US&page=1`
};
const promiseArr=[]；
常量承诺=[]；
用于（所有电影URL中的常量电影）{
const obj={[movies]：未定义}；
push（获取（allMovieURLs[movies]）。然后（res=>obj[movies]=res））；
承诺推送（obj）；
}
Promise.all（promises.then（function）（）{
控制台日志（promiseArr）；
});您也可以将承诺本身存储在另一个数组中


函数fetch（）{
var time=Math.random（）*1E3；
返回新承诺（功能（res、rej）{
setTimeout（函数（）{
res（时间）；
}，时间）；
});
}
const API_KEY=“”；
const allMovieURLs={
趋势：`https://api.themoviedb.org/3/trending/all/day?api_key=${API_KEY}`，
高估：`https://api.themoviedb.org/3/movie/top_rated?api_key=${API\u KEY}&language=en-US&page=1`，
正在播放：`https://api.themoviedb.org/3/movie/now_playing?api_key=${API\u KEY}&language=en-US&page=1`，
即将到来的：`https://api.themoviedb.org/3/movie/upcoming?api_key=${API_KEY}&language=en-US&page=1`
};
const promiseArr=[]；
常量承诺=[]；
用于（所有电影URL中的常量电影）{
const obj={[movies]：未定义}；
push（获取（allMovieURLs[movies]）。然后（res=>obj[movies]=res））；
承诺推送（obj）；
}
Promise.all（promises.then（function）（）{
控制台日志（promiseArr）；
});