javascript - 从循环内的 Promise 值设置状态

Question

我正在使用 React 和 axios 进行外部 API 调用，循环遍历传回 API 调用的数组中的每个对象。在循环内部，我有一个 promise ，它调用了另一个返回对象的函数。我想使用此对象返回的值并将它们分配给循环外部的变量，该变量是用于设置状态的数组，但我似乎无法这样做，因为它始终为空？希望下面代码中的注释可以帮助您理解我的问题。

let self = this;
this.instance.get('/fixtures?timeFrame=n1').then((fixtures) => {
  // get all fixtures
  const allFixtures = fixtures.data.fixtures;
  // create valid fixtures array to add all fixture details to pass to fixtures state
  let validFixtures = [];
  // loop through all fixture objects in allFixtures array
  for (var i = 0; i < (allFixtures.length); i++) {
    // check if valid fixture, returns true or false
    let isValid = self.isValid(allFixtures[i]);
    // if fixture is valid
    if (isValid) {
      // get id of fixture to pass through to fixture route with id query
      let fixtureId = allFixtures[i]._links.self.href.split('v1/')
        .pop();
      // home teams name
      let homeTeam = allFixtures[i].homeTeamName;
      // away teams name
      let awayTeam = allFixtures[i].awayTeamName;
      // call head2head function to get all previous results from the two teams playing and returns average score
      // returns as object, example: { 'homeTeamAvgScore': 2, 'awayTeamAvgScore': 1 }
      self.getHead2Head(fixtureId, homeTeam,
        awayTeam).then((avg) => {
        //in here i want to push object into validFixtures array along with homeTeam and awayTeam as named values
        return validFixtures.push({
          'homeTeam': homeTeam,
          'awayTeam': awayTeam,
          'homeTeamAvgScore': avg.homeTeamAvgScore,
          'awayTeamAvgScore': avg.awayTeamAvgScore
        })
      });
    }
  }
  //validFixtures is empty??? 
  //How else can push to array and then later setState to fixtures with validFixtures array???
  self.setState({
    fixtures: validFixtures
  });
}).catch((error) => {
  console.log(error);
});
}

Answer 1

这一特定要求被称为障碍。也就是说，您想要等待 n 个任务完成，然后执行某些操作。 “等待n个任务完成”部分可以使用屏障来实现。

如果您使用 Promises，则可以使用 Promise.all 轻松完成此操作。 Axios 公开了 Promise 接口(interface)。

如果您不想使用 Promises，则必须使用 async npm 库之类的东西，或者自己实现屏障。

更新:

Async - Await 与其他答案之一中提到的 Promise.all 不同。建议的方法可能会降低性能，因为循环将一个接一个地同步运行。这在MDN docs中有清楚的解释。 。

修复示例，

this.instance.get('/fixtures?timeFrame=n1')
    .then((fixtures) => {
        // ...Same code as yours
        const allFixtures = fixtures.data.fixtures;
        let promises = [];

        for (let i = 0; i < (allFixtures.length); i++) {
            // ... Same code as yours
            if (isValid) {
                // ... Same code as yours

                // Don't call "then". We will resolve these promises later
                promises.push(this.getHead2Head(fixtureId, homeTeam, awayTeam));
            }
        }

        Promise.all(promises)
            .then(averages=>{
                let validFixtures = averages.map((avg, index)=>{
                    return {
                        'homeTeam': allFixtures[index].homeTeamName,
                        'awayTeam': allFixtures[index].awayTeamName,
                        'homeTeamAvgScore': avg.homeTeamAvgScore,
                        'awayTeamAvgScore': avg.awayTeamAvgScore
                    };
                });
                this.setState({
                    fixtures: validFixtures
                });
            });
    })
    .catch((error) => {
        console.log(error);
    });

一些旁注:

1. 此处不需要 self 变量。只要您使用箭头函数 (=>) 而不是 function 关键字，此范围就不会更改。
2. 我缩进然后解析的方式有点不同。这只是因为它对我来说更具可读性