Concurrent Requests
In modern web applications, initiating multiple network requests simultaneously is common to improve performance and responsiveness. Axios supports concurrent requests using Promise.all() and axios.all().
Using Promise.all() for Concurrent Requests:
const promise1 = axios.get('https://api.example.com/data1');
const promise2 = axios.get('https://api.example.com/data2');
Promise.all([promise1, promise2])
.then(responses => {
// Responses is an array containing each request's response
console.log(responses[0].data);
console.log(responses[1].data);
})
.catch(error => {
console.error(error);
});Using axios.all() and axios.spread():
axios.all([
axios.get('https://api.example.com/data1'),
axios.get('https://api.example.com/data2')
])
.then(axios.spread((res1, res2) => {
// res1 and res2 are the responses for each request
console.log(res1.data);
console.log(res2.data);
}))
.catch(errors => {
console.error(errors);
});Canceling Requests
In some cases, you may need to cancel a request before it completes, such as when a user navigates away or a component unmounts. Axios provides functionality to cancel requests.
Creating a Cancel Token:
import { CancelToken } from 'axios';
const source = CancelToken.source();
axios.get('/users', {
cancelToken: source.token
})
.then(response => {
console.log(response.data);
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// Handle error
}
});
// Cancel the request
source.cancel('Operation canceled by the user.');Comprehensive Example of Concurrent Requests and Cancellation
import axios from 'axios';
const cancelSource1 = axios.CancelToken.source();
const cancelSource2 = axios.CancelToken.source();
axios.all([
axios.get('https://api.example.com/data1', { cancelToken: cancelSource1.token }),
axios.get('https://api.example.com/data2', { cancelToken: cancelSource2.token })
])
.then(axios.spread((res1, res2) => {
console.log('Data1:', res1.data);
console.log('Data2:', res2.data);
}))
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request was canceled', error.message);
} else {
console.error('An error occurred:', error);
}
});
// Simulate a scenario where the user leaves the page or component unmounts
cancelSource1.cancel('User left the page.');
cancelSource2.cancel('User left the page.');
