Cómo ejecutar múltiples solicitudes concurrentes con axios.all()
¿Qué es y cómo funciona axios.all()?
axios.all() toma un array de promesas (solicitudes HTTP en este caso) y devuelve una promesa que se resuelve cuando todas las solicitudes han finalizado. Combina esto con axios.spread() para manejar los resultados de manera más limpia, permitiendo desestructurar fácilmente las respuestas.
Ejemplo básico de uso
const axios = require('axios');
// Realizar múltiples solicitudes concurrentes
axios.all([
axios.get('https://api.ejemplo.com/usuarios'),
axios.get('https://api.ejemplo.com/posts')
])
.then(axios.spread((usuariosResponse, postsResponse) => {
// Manejar ambas respuestas
console.log('Usuarios:', usuariosResponse.data);
console.log('Posts:', postsResponse.data);
}))
.catch(error => {
console.log('Error en alguna de las solicitudes:', error);
});
En este ejemplo, se ejecutan dos solicitudes HTTP en paralelo: una para obtener los usuarios y otra para obtener los posts. Una vez que ambas solicitudes se completan, axios.spread() permite desestructurar y manejar las respuestas de manera individual.
Ejemplos adicionales
Ejecutar múltiples solicitudes POST concurrentes
Puedes usar axios.all() con solicitudes de diferentes tipos, como POST, PUT, o DELETE:
axios.all([
axios.post('https://api.ejemplo.com/crearUsuario', { nombre: 'Juan' }),
axios.post('https://api.ejemplo.com/crearPost', { titulo: 'Nuevo Post' })
])
.then(axios.spread((usuarioResponse, postResponse) => {
console.log('Usuario creado:', usuarioResponse.data);
console.log('Post creado:', postResponse.data);
}))
.catch(error => {
console.error('Error en las solicitudes:', error);
});En este caso, se envían dos solicitudes POST al mismo tiempo, una para crear un usuario y otra para crear un post. Las respuestas se gestionan de forma concurrente.
Solicitudes dinámicas con un array
Si tienes un número variable de solicitudes, puedes generarlas dinámicamente y pasarlas a axios.all():
const endpoints = [
'https://api.ejemplo.com/producto/1',
'https://api.ejemplo.com/producto/2',
'https://api.ejemplo.com/producto/3'
];
const requests = endpoints.map(url => axios.get(url));
axios.all(requests)
.then(axios.spread((...responses) => {
responses.forEach((response, index) => {
console.log(`Producto ${index + 1}:`, response.data);
});
}))
.catch(error => {
console.error('Error en alguna solicitud:', error);
});Este ejemplo genera dinámicamente las solicitudes en función de los endpoints proporcionados, ejecutándolas todas en paralelo y procesando sus respuestas una vez que todas han finalizado.
Referencia oficial
Para más detalles sobre el uso de axios.all(), visita la documentación oficial de Axios.
Jorge García
Fullstack developer