I am using Vuex and Axios. What I need to accomplish is an API that gets a list of items, then loops over the items and calls a separate API to get the full details for each, and then saves them to an array IN ORDER.
I read something about axios.all and it seems like you're supposed to be able to make an array of promises and then call axios.all and that will do some synchronous magic. What I have right now runs the 'promises' console log statement, doesn't log anything from the axios.all call, and then resolves with nothing saved.
GET_REPORT_HISTORY: function({commit, state, dispatch}) {
state.fullReports = [];
let dto = {
customerId: state.member.customerId
}
return new Promise((resolve, reject) => {
axios.post('http://localhost:3001/api/getReportHistory', dto).then((response) => {
console.log("response", response);
let promises = [];
for (let report of response.data.res.body.result) {
let dto2 = {
customerId: state.member.customerId,
reportToken: report.reportToken
}
promises.push(axios.post('http://localhost:3001/api/pullReport', dto2));
}
console.log("promises", promises);
axios.all(promises).then(function(results) {
console.log("results", results);
results.forEach(function(res) {
commit('SAVE_REPORT', res);
})
});
resolve('Reports saved.');
}, (err) => {
reject(err);
});
})
},
Here were the two resources I used https://github.com/axios/axios#user-content-axiosalliterable Waiting for all promises called in a loop to finish