Vue - Continue to fetch all items asynchronously within a for loop

Question

Vue - Continue to fetch all items asynchronously within a for loop

I am facing a challenge where I have an array of data that needs to be fetched using a for loop. However, I want to fetch this data asynchronously to make multiple calls at the same time. Additionally, once all the data has been fetched, I need to perform some data manipulation which should be done after all the data has been retrieved.

for (var e in this.dataTofetch) {
  axios
    .get("https://www.example.com/api/" + e)
    .then((response) => this.fetchedData.push(response.data));
}
this.manipulateData();

The issue lies in the fact that when I try to run the manipulateData function, the fetchedData is empty.

I also experimented with trying to execute the code synchronously using await, but this resulted in slow performance when making multiple calls.

javascript vue.js axios fetch

Answer 1

Answer №1

If you want to fetch data from multiple sources in JavaScript, consider using the built-in function Promise.all()

Promise.all(
  this.urls.map(url => axios.get(`https://www.example.com/api/${url}`)),
).then(responses =>
  responses.forEach(response => this.data.push(response.data)),
);

this.processData();

Answer 2

If you want to fetch data from multiple sources in JavaScript, consider using the built-in function Promise.all()

Promise.all(
  this.urls.map(url => axios.get(`https://www.example.com/api/${url}`)),
).then(responses =>
  responses.forEach(response => this.data.push(response.data)),
);

this.processData();

Answer 3

Answer №2

To accomplish this task, you can utilize the Promise.all method.

const requests = this.dataTofetch.map(item => axios
    .get("https://www.example.com/api/" + item))
Promise.all(requests).then(responsesArr => {
    // Process the responses here (responsesArr[x] = response)
})

Answer 4

To accomplish this task, you can utilize the Promise.all method.

const requests = this.dataTofetch.map(item => axios
    .get("https://www.example.com/api/" + item))
Promise.all(requests).then(responsesArr => {
    // Process the responses here (responsesArr[x] = response)
})

Answer 5

Answer №3

To efficiently handle this situation, I recommend utilizing the Promise.all() method. By using this approach, you can eliminate the need for a .then handler since axios.get() already returns a promise.

If you're interested in seeing a practical example of this implementation, feel free to check out this resource on StackOverflow: Promise All with Axios.

Answer 6

To efficiently handle this situation, I recommend utilizing the Promise.all() method. By using this approach, you can eliminate the need for a .then handler since axios.get() already returns a promise.

If you're interested in seeing a practical example of this implementation, feel free to check out this resource on StackOverflow: Promise All with Axios.

Vue - Continue to fetch all items asynchronously within a for loop

Answer №1

Answer №2

Answer №3

Similar questions

The typical initial default argument to be passed to the function using fn.apply

Encountering a 404 error when trying to navigate to the next route using the Link component

Different types of outputs that are suitable for a callback

Retrieving the body of a GET request using NodeJS and axios

Replicate the function of the back button following the submission of an ajax-submitted form to Preview Form

Obtain asynchronous view model for component

The tabs are visible in the drawer, but the transition is not occurring

error message remains visible even after correct input is entered

I'm surprised by the fact that array.findIndex is not functioning properly. According to Mozilla, it should be working fine

What is the best way to switch back and forth between two div elements?

The HTML iframe is displaying blank content

Transfer information from PHP to JavaScript across distinct files

How can a border be applied to a table created with React components?

Set addition fails to trigger computed property

What's causing this sluggish performance?

What is the process of integrating ES6 modules with app.get in a Node/Express routing application?

Is there a way to upload a kml file to Google Maps using my website or by using JavaScript commands?

Updating .babelrc to include the paths of JavaScript files for transpilation

How to retrieve a value from ng-options using AngularJS?

Generating an instance of an enum using a string in Typescript