How to make multiple requests in parallel using axios and vue ?
Add a comment
|
2 Answers
Since axios can be used by React and Vue it is pretty much the same code.
Make sure to read axios docs, you can understand it from there.
Anyway, I am going to show you an example:
<template>
<div>
<button @click="make_requests_handler">Make multiple request</button>
{{message}} - {{first_request}} - {{second_request}}
</div>
</template>
And the script:
import axios from 'axios'
export default {
data: () => ({
message: 'no message',
first_request: 'no request',
second_request: 'no request'
}),
methods: {
make_requests_handler() {
this.message = 'Requests in progress'
axios.all([
this.request_1(), //or direct the axios request
this.request_2()
])
.then(axios.spread((first_response, second_response) => {
this.message = 'Request finished'
this.first_request = 'The response of first request is' + first_response.data.message
this.second_request = 'The response of second request is' + second_response.data.message
}))
},
request_1() {
this.first_request: 'first request began'
return axios.get('you_URL_here')
},
request_2() {
this.second_request: 'second request began'
return axios.get('another_URL', { params: 'example' })
}
}
}
5 Comments
Ready Dev
Thank you it help me a lot!
Terry
If anyone is reading this in 2020+...
axios.all might be undefined. Use the native ES6 Promise.all instead.dr_barto
Also it should be mentioned that the OP didn't directly ask for synchronizing the results of parallel calls (even though it apparently was what he/she was looking for). "Parallel requests" could also just mean to start multiple async calls from the same handler, and just treat each result separately when it comes in. Depending on the use case (i.e. when the calls and the usage of their results are independent), this would improve the performance of the app, while using
all will delay faster calls until the slowest call finished.
Roland
@Terry how can axios.all be undefined?? @dr_barto I am not getting what you mean. The answer provides a solution so both requests will execute in parallel and resolve when both of them have finished. In the
then block you can handle both responses. Read more here -> github.com/axios/axios/issues/371
Kevin
Just to build on dr_barto - as these are async calls they're already happening in parallel automatically. You'd only want to rely upon Promise.all if you needed to wait for all the requests to finish before running some code. It's better to separate your concerns per request/component when possible though.
You can pass your asynchronous calls to Promise.all. As long as each of them returns a promise they will execute at the same time. I'm using store.dispatch but you could equally use axios calls or fetch.
In this example i'm making the calls when the vue component gets created:
...
async created() {
const templates = this.$store.dispatch(TEMPLATES_LOAD);
const userTemplates = this.$store.dispatch(USER_TEMPLATES_LOAD);
const players = this.$store.dispatch(OTHER_PLAYERS_LOAD);
return await Promise.all([templates, userTemplates, players])
.then(() => {
console.log('Loaded data for form elements');
});
}
