Question

我正在调用一个后端服务，以从loadContent方法中首次获取所有可用的IDS，并且从后端获取所有IDS。

利用初始服务中随机选择的10个IDS，我正在单独调用另一个服务以获取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
  }
}

Answer 1

您需要从其内部块中return中每个Promise，以便可以将它们全部链接在一起，并使.then((stories)仅在它们完成后才执行。即，更改为：

return fetch( /* initial calls to

// ...

return customAlert(data, function() {

// ...

return fetch('to get the...

// ...

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

以便初始调用

return loopArray(data);

仅在其他所有Promise（现已与初始调用正确链接）解决后，才能最终解决。

您还可以使用push来简化代码，例如：

stories.push(output);

而不是保留x数组当前长度的stories变量，以便您可以分配给stories[x]。

此外，如果您能够并行做出承诺，则可以考虑使用Promise.all，以减少完成整个功能所需的时间。

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

1 个答案: