make for loop wait till data is back from API

Question

I have a structure like this:

methods: {
  function() {
    //some stuff in here    

    for(let i=0; i < array.length; i++) {
      //Problem in here or around here
      //in here I send something to my API and want to get data back
    }
  }
}

Explenation what I do: I have an array where I want to loop, for every loop I send data to my API and get data back inside the for-loop.

My problem: I always get the data back in different order because one ot the data is probably bigger and than it takes longer than the others.

Example: I send Array = [1,2,3,4] and want to get it back in the correct order. But 1 needs more time than 2,3,4 and I get than data back in order [2,3,4,1].

How can I assign my for-loop to wait till the first data is back and than go on?

Thank You!

Does this answer your question? [Using async/await with a forEach loop](https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop) — evolutionxbox, Dec 21 '21 at 08:34
Promises or generator functions might help, depending on the scenario. — connexo, Dec 21 '21 at 08:41

DustInComp · Answer 1 · 2021-12-21T19:41:32.203

3

As soon as you've read up on async/await, you'll still wanna run your requests in parallel to save time, rather than sequentially. Promise.all helps here:

async function fetchData () {

  const resultsInOrder = await Promise.all(
    // pass an array of Promises
    array.map(element =>
      fetch(/* some arguments based on the element's data */)
        .then(res => res.json())
    )
  )
  // do something with results
}

edited Dec 21 '21 at 19:41

answered Dec 21 '21 at 08:44

DustInComp

1,742
8
18

Map function didn't return a promise. – Estus Flask Dec 21 '21 at 10:31
@EstusFlask No, `array.map()` is supposed to return an array of Promises. `Promise.all` takes that as a single argument and resolves to an array of resolved values once they're all done, or rejects if any Promise from the array does. – DustInComp Dec 21 '21 at 19:39
I mean that there's no return statement and you get an array of undefined – Estus Flask Dec 21 '21 at 19:41
Oh, I see, my bad. I fixed the code. – DustInComp Dec 21 '21 at 19:41

make for loop wait till data is back from API

1 Answers1