i have an array of data to be fetched, so i have to use a for loop to fetch all the data, but i want to do it asynchronously (multiple calls at the same time). After having fetched the data i also want to do some data manipulation, so i need to run code AFTER all the data has been fetched
for (var e in this.dataTofetch) {
axios
.get("https://www.example.com/api/" + e)
.then((response) => this.fetchedData.push(response.data));
}
this.manipulateData();
The problem is that whenever i reach the manipulateData function, fetchedData is empty.
Also i tried doing it synchronously using await and it works but it becomes very slow when making multiple calls.
You can achieve this with Promise.all-method.
const promises = this.dataTofetch.map(e =>axios
.get("https://www.example.com/api/" + e))
Promise.all(promises).then(arrOfRes => {
// Do something with the responses (arrOfRes[x] = response)
})
You can use Promise.all()
Promise.all(
this.dataTofetch.map(e => axios.get(`https://www.example.com/api/${e}`)),
).then(responses =>
responses.forEach(r => this.fetchedData.push(r.data)),
);
this.manipulateData();
The best approach I can think of is to use Promise.all(). You will leave out the .then-handler, because axios.get() returns you a promise.
An exact implementation example can be found here at StackOverflow: Promise All with Axios.