Wait For One Fetch To Finish Before Starting The Next

I have a list of data that I am sending to google cloud. My current code looks like this: const teams = ['LFC', 'MUFC', 'CFC']; teams.forEach(team => { fetch({ url: U

Solution 1:

Use a reduce instead of forEach, with .then().

The following will store the promise of the last fetch in acc (the accumulator parameter of reduce), and appends the new fetch inside of a then listener, to ensure that the previous fetch is finished:

const teams = ['LFC', 'MUFC', 'CFC'];

teams.reduce((acc, team) => {
  return acc.then(() => {
    returnfetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  })
}, Promise.resolve())
  .then(() =>console.log("Everything's finished"))
  .catch(err =>console.error("Something failed:", err))

//Simulate fetch:constfetch = team => newPromise(rs =>setTimeout(() => {rs();console.log(team)}, 1000))

const teams = ['LFC', 'MUFC', 'CFC'];

teams.reduce((acc, team) => {
  return acc.then(() => {
    returnfetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  })
}, Promise.resolve())
  .then(() =>console.log("Everything's finished"))
  .catch(err =>console.error("Something failed:", err))

You can even write a general helper function for it:

const teams = ['LFC', 'MUFC', 'CFC'];

constpromiseSeries = cb => teams.reduce((acc, elem) => acc.then(() =>cb(elem)), Promise.resolve())

promiseSeries((team) => {
  returnfetch({
    url: URL,
    method: 'PUT',
    body: team
  })
})
  .then(() =>console.log("Everything's finished"))
  .catch(err =>console.error("Something failed:", err))

//Simulate fetch:constfetch = team => newPromise(rs =>setTimeout(() => {rs();console.log(team)}, 1000))

const teams = ['LFC', 'MUFC', 'CFC'];

constpromiseSeries = cb => teams.reduce((acc, elem) => acc.then(() =>cb(elem)), Promise.resolve())

promiseSeries((team) => {
  returnfetch({
    url: URL,
    method: 'PUT',
    body: team
  })
})
  .then(() =>console.log("Everything's finished"))
  .catch(err =>console.error("Something failed:", err))

Or, even better, if you can (it's ES2017), use async/await (it's more readable):

const teams = ['LFC', 'MUFC', 'CFC'];

asyncfunctionupload(teams){
  for(const team of teams){
    awaitfetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  }
}

upload(teams)
  .then(() =>console.log("Everything's finished"))
  .catch(err =>console.error("Something failed:", err))

//Simulate fetch:constfetch = team => newPromise(rs =>setTimeout(() => {rs();console.log(team)}, 1000))

const teams = ['LFC', 'MUFC', 'CFC'];

asyncfunctionupload(teams) {
  for (const team of teams) {
    awaitfetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  }
}

upload(teams)
  .then(() =>console.log("Everything's finished"))
  .catch(err =>console.error("Something failed:", err))

Solution 2:

You can use async/await with a for...of loop. Each call will "hold" the loop, until it's done, and then the loop will continue the next call:

const teams = ['LFC', 'MUFC', 'CFC'];

asyncfunctionsend(teams) {
  for (const team of teams) {
    awaitfetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  }
}

Solution 3:

You can make use of async/await, as follows:

const teams = ['LFC', 'MUFC', 'CFC'];

teams.forEach(async (team) => {
    await fetch({
      url: URL,
      method: 'PUT',
      body: team
    });
})