React中for循环内部的异步函数

Question

I have this piece of code in React which calls the Dark Sky API and returns weather data for a specific day. Each request gets a particular date. Once the request is successful, I put the data in an array via setState. The code runs fine but each request runs asynchronously so the data gets pushed to the array in the order in which each call completes so it's not getting me an ordered day list. Here's the code:

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);
  }
}

Thanks!

Answer 1

You can use for.. of which will run in sequence:

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

Answer 2

Use Promise.all . Waaay faster than using recursion or await in a loop, as all the API calls will happen concurrently rather than sequentially.

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
});

Answer 3

The problem is that nothing ensures you one request finish before another, but it depends on how the function darkSky it's implemented. As far as I can guess from your code it will look something like this:

function darkSky(url, onTimeRequestSuccess, onError) {
     return fecth(url).then(onTimeRequestSuccess).catch(onError);
}

Because you're using onTimeRequestSuccess as a resolving on the promise inside darkSky the await in processArray is not going to wait for the fetch promise, instead is going to wait for the result of onTimeRequestSuccess . That's why the order is not maintained.

If you want to keep the order (without reordering after getting the data) and not having a chain of 30 consecutive calls, one approach could be create an array with the promises of all the queries, wait for all to be resolved using Promise.all and then setting the whole array to the state. Eg:

loadPreviousMonth = () => {
  const current = {...this.state};
  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(fetch(url));
  }

  Promise.all(promises).then((results) => this.setState({results: results}));
}

Answer 4

You could try recurssive function call. something like this:

 var delay = ms => new Promise(res => setTimeout(res, ms)); function executeInOrder(iteration){ if(iteration>0){ delay(500).then(()=>{ console.log(iteration) executeInOrder(iteration-1) }) } } executeInOrder(30) 

But as mentioned in comments, calling all and then sorting will be faster.