React 中 for 循环内的异步函数

Question

我在 React 中有这段代码，它调用 Dark Sky API 并返回特定日期的天气数据。每个请求都有一个特定的日期。请求成功后，我通过 setState 将数据放入数组中。代码运行良好，但每个请求都是异步运行的，因此数据会按照每个调用完成的顺序推送到数组，因此它不会为我提供有序的日期列表。这是代码：

loadPreviousMonth = async () => {
  const current = {...this.state};

  for (let i=30; i >= 1; i--) {
    const date = new Date();
    const previousDay = Math.floor(date.setDate(date.getDate() - i) / 1000);
    const url = `/api/darksky?latitude=${current.latitude}&longitude=${current.longitude},${previousDay}`;
    await darkSky(url, this.onTimeRequestSuccess, this.onError);
  }
}

谢谢！

Answer 1

您可以使用 for.. ，其中将按顺序运行：

async function processArray(array) {
  for (const item of array) {
    await darkSky(url, this.onTimeRequestSuccess, this.onError);
  }
 console.log('Done!');
}

Answer 2

使用Promise.all。比在循环中使用递归或等待更快，因为所有 API 调用将同时发生而不是顺序发生。

const promises = [];

for (let i=30; i >= 1; i--) {
    const date = new Date();
    const previousDay = Math.floor(date.setDate(date.getDate() - i) / 1000);
    const url = `/api/darksky?latitude=${current.latitude}&longitude=${current.longitude},${previousDay}`;
    promises.push(darkSky(url, this.onTimeRequestSuccess, this.onError));
}

Promise.all(promises).then(arrOfResults => {
  // setState here
});