Estoy intentando hacer varias solicitudes http (usando axios), una para cada URL en una lista. Tan pronto como se resuelva una solicitud individual, quiero realizar otra solicitud a una URL creada a partir de la respuesta de la solicitud anterior. Finalmente, cuando se resuelvan todas las solicitudes secundarias, quiero hacer algo con todas sus respuestas.
He intentado lograr esto de la siguiente manera:
let promises = []; urls.forEach(url => { const promise = axios.get(url); promise.then(response => { promises.push(axios.get(response.data.url)) }); }); Promise.all(promises).then(responses => { // do something with responses }) Espero que las respuestas de todas las solicitudes de URL secundarias se resuelvan cuando se .then(responses => {}) , pero cuando este código se activa, la matriz de respuestas está vacía.
¿Cómo puedo lograr algo como esto?
Devuelva el axios.get anidado a una devolución de llamada de mapeo, de modo que Promise.all esperará a que todas las solicitudes anidadas se completen primero.
Promise.all( urls.map( url => axios.get(url).then( response => axios.get(response.data.url) ) ) ) .then((results) => { // ... })Esto es lógico teniendo en cuenta que la primera declaración de promise.then() es asíncrona. Las urls.forEach , aunque aparentemente asíncronas, son síncronas. Por lo tanto Promise.all() se llama antes de que se envíen promesas a su matriz.
Podrías configurarlo así:
let promises = []; urls.forEach(url => { promises.push(axios.get(url).then((response) => { return axios.get(response.data.url); }); }); Promise.all(promises).then(responses => { // do something with responses }); Esto encadena .then() directamente a la primera solicitud de axios, que luego se envía a la matriz de promesas.