Javascript 然后在执行所有异步调用之前执行函数

我正在调用后端服务从

loadContent

方法获取第一次获取中可用的所有ID，并且我正在从后端获取所有ID

使用从初始服务中随机选取的10个ID，我单独调用另一个服务以获取ID的完整数据。我也能够获取所有数据，但在获取所有数据之前，调用了调度功能，因此存储中未设置数据

export function loadContent(requestUrl) {
  return dispatch => {

   return fetch( /* initial calls to get all the ids */ ).then((response) => {
      return response.json();
    }).then((data) => {
      console.log(data);
      var stories = [];


      var x = 0;
      var loopArray = function(data) {
      return customAlert(data, function() {


        });
      }

      function customAlert(topStories, callback) {
        var randomNumber = topStories[Math.floor(Math.random() * topStories.length)];
        fetch( /* call service with individual id */ ).then((response) => {
          return response.json();
        }).then((output) => {
          console.log(output);
          stories[x] = output;
          x++;

          // any more items in array? continue loop
          if (x <= 10) {
            loopArray(data);
          } else {
            return stories;
          }
        })
      }
     return loopArray(data);
    }).then((stories) => {
      dispatch({
        type: "LOAD",
        payload: stories
      });
    }).catch((err) => {
      console.log("There has been error");
    })


  };
}

export function load(news) {
  return {
    type: 'LOAD',
    news: news
  }
}

导出函数loadContent（requestUrl）{
返回调度=>{
返回fetch（/*初始调用以获取所有ID*/）。然后（（响应）=>{
返回response.json（）；
})。然后（（数据）=>{
控制台日志（数据）；
var故事=[]；
var x=0；
var loopArray=函数（数据）{
返回customAlert（数据，函数（）{
});
}
函数customAlert（上表面、回调）{
var randomNumber=topStories[Math.floor（Math.random（）*topStories.length）]；
获取（/*带有个人id的呼叫服务*/）。然后（（响应）=>{
返回response.json（）；
})。然后（（输出）=>{
控制台日志（输出）；
故事[x]=输出；
x++；
//数组中还有其他项吗？继续循环
if（x）{
派遣({
类型：“加载”，
有效载荷：故事
});
}).catch（（错误）=>{
console.log（“出现错误”）；
})
};
}
导出函数加载（新闻）{
返回{
类型：“加载”，
新闻：新闻
}
}

您需要

从其内部块返回每个
承诺，这样您就可以将它们链接在一起并拥有
。然后（（故事）
只在它们全部完成后执行。即，更改为：

return fetch( /* initial calls to

// ...

return customAlert(data, function() {

// ...

return fetch('to get the...

// ...

if (x <= 10) {
  return loopArray(data);
}

只有在其他承诺（现在与初始调用正确链接）解决后，才会最终解决

您还可以通过使用
推送
来简化代码，例如：

stories.push(output);

不要保留
stories
数组当前长度的
x
变量，这样您就可以分配给
stories[x]

也可以考虑使用<代码>承诺>所有< /代码>，如果您能够并行作出承诺，以减少整个函数完成所需的时间。
 < p>您需要从其内部块“<代码>返回< <代码>承诺> /代码>，以便您可以将它们全部链接在一起，并具有<代码>。
仅在它们全部完成后执行。即，更改为：

return fetch( /* initial calls to

// ...

return customAlert(data, function() {

// ...

return fetch('to get the...

// ...

if (x <= 10) {
  return loopArray(data);
}

只有在其他承诺（现在与初始调用正确链接）解决后，才会最终解决

您还可以通过使用
推送
来简化代码，例如：

stories.push(output);

不要保留
stories
数组当前长度的
x
变量，这样您就可以分配给
stories[x]

也可以考虑使用<代码>承诺>所有< /代码>，如果您能够并行作出承诺，以减少整个函数完成所需的时间。
我添加了返回，但仍然是相同的行为：（@user1645290）如果您按照答案的规定正确链接所有承诺，您就无法实际获得相同的行为。代码中的
回调看起来可疑。当您使用承诺时，不应该有随机回调，它们是不需要的。如果异步代码驻留在那里，它将无法按预期工作。我已经添加了返回，但仍然是相同的haviour:（@user1645290）如果您按照答案的规定正确链接所有承诺，您就无法获得相同的行为。代码中的
回调看起来可疑。当您使用承诺时，不应该有随机回调，它们是不需要的。如果异步代码驻留在那里，它将无法按预期工作。