Don't initiate the next fetch until the previous one has completed

Question

Don't initiate the next fetch until the previous one has completed

I am currently working on sending a list of data to Google Cloud. The code I have been using is as follows:

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

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

While this approach works with one team, it encounters timeouts when dealing with multiple larger files. I need to switch to POST the data one file at a time and ensure that each POST operation completes before moving onto the next one. How can I implement this in the most efficient way?

It's important to note that I do not have control over the number of files being uploaded.

javascript ajax ecmascript-6 fetch-api

Answer 1

Answer №1

Replace the use of forEach with a reduce, and include .then().

The code below will keep track of the promise from the last fetch in acc (the accumulator parameter of reduce). It appends the new fetch inside a then listener to ensure the previous fetch is completed:

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

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

//Simulate fetch:
const fetch = team => new Promise(rs => setTimeout(() => {rs();console.log(team)}, 1000))

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

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

You have the option to create a general helper function for this approach:

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

const promiseSeries = (arr, cb) => arr.reduce((acc, elem) => acc.then(() => cb(elem)), Promise.resolve())

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

//Simulate fetch:
const fetch = team => new Promise(rs => setTimeout(() => {rs();console.log(team)}, 1000))

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

const promiseSeries = (arr, cb) => arr.reduce((acc, elem) => acc.then(() => cb(elem)), Promise.resolve())

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

Alternatively, if you are able to (ES2017), utilizing async/await is recommended for improved readability:

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

async function upload(teams){
  for(const team of teams){
      await fetch({
        url: URL,
        method: 'PUT',
        body: team
      });
  }
}

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

//Simulate fetch:
const fetch = team => new Promise(rs => setTimeout(() => {rs();console.log(team)}, 1000))

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

async function upload(teams) {
    for (const team of teams) {
        await fetch({
          url: URL,
          method: 'PUT',
          body: team
        });
    }
}

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

Answer 2

Replace the use of forEach with a reduce, and include .then().

The code below will keep track of the promise from the last fetch in acc (the accumulator parameter of reduce). It appends the new fetch inside a then listener to ensure the previous fetch is completed:

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

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

//Simulate fetch:
const fetch = team => new Promise(rs => setTimeout(() => {rs();console.log(team)}, 1000))

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

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

You have the option to create a general helper function for this approach:

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

const promiseSeries = (arr, cb) => arr.reduce((acc, elem) => acc.then(() => cb(elem)), Promise.resolve())

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

//Simulate fetch:
const fetch = team => new Promise(rs => setTimeout(() => {rs();console.log(team)}, 1000))

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

const promiseSeries = (arr, cb) => arr.reduce((acc, elem) => acc.then(() => cb(elem)), Promise.resolve())

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

Alternatively, if you are able to (ES2017), utilizing async/await is recommended for improved readability:

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

async function upload(teams){
  for(const team of teams){
      await fetch({
        url: URL,
        method: 'PUT',
        body: team
      });
  }
}

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

//Simulate fetch:
const fetch = team => new Promise(rs => setTimeout(() => {rs();console.log(team)}, 1000))

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

async function upload(teams) {
    for (const team of teams) {
        await fetch({
          url: URL,
          method: 'PUT',
          body: team
        });
    }
}

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

Answer 3

Answer №2

Utilizing async/await alongside a for...of loop can help manage asynchronous calls more effectively. Each call will pause the loop execution until it's completed, allowing for better control over the sequence of actions:

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

async function send(teams) {
  for (const team of teams) {
    await fetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  }
}

Answer 4

Utilizing async/await alongside a for...of loop can help manage asynchronous calls more effectively. Each call will pause the loop execution until it's completed, allowing for better control over the sequence of actions:

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

async function send(teams) {
  for (const team of teams) {
    await fetch({
      url: URL,
      method: 'PUT',
      body: team
    });
  }
}

Answer 5

Answer №3

One way to achieve this is by utilizing async/await in the code snippet below:

const players = ['Messi', 'Ronaldo', 'Neymar'];

players.forEach(async (player) => {
    await fetch({
      url: URL,
      method: 'POST',
      body: player
    });
})

Answer 6

One way to achieve this is by utilizing async/await in the code snippet below:

const players = ['Messi', 'Ronaldo', 'Neymar'];

players.forEach(async (player) => {
    await fetch({
      url: URL,
      method: 'POST',
      body: player
    });
})

Don't initiate the next fetch until the previous one has completed

Answer №1

Answer №2

Answer №3

Similar questions

Hide preloader in AngularJS once repeater has completed execution

Tips for incorporating a multimedia HTML/JavaScript application within C++ programming

I am getting a HTTP 405 error indicating that the method is not allowed, and it appears to

Why do I keep getting an ExpressionChangedAfterItHasBeenChecked error after trying to update a random color in an

How about representing a two-dimensional array in a point-free manner?

Developing a system mode called "night mode"

Include a query parameter each time a page is added to bookmarks

Error: Unable to locate module: Could not find '@/styles/globals.scss'

Tips for utilizing the GROUP BY Clause in Sequelize along with associations

Encountering a TypeError while attempting to sort in ReactJS: "0 is read only."

What is the best way to link a file to index.html using feathers.js?

Retrieving information from Firebase after updating it

Issue with scroll animation across multiple div elements

What's the reason behind the malfunction of this code on Chrome?

How can Vue.js pass an array from a child component to its parent component?

Ajax - unable to show posts upon submission

The dictionary of parameters has an empty entry for the 'wantedids' parameter, which is of a non-nullable type 'System.Int32', in the 'System.Web.Mvc.JsonResult' method

Verify user identity before sending directory in Express

Implementing Ajax image upload functionality in Symfony2 framework

Encountering issues with compiling files in react app using webpack, failing to compile as anticipated