Tengo un componente React que activa un evento para obtener datos. Esto da como resultado un número dinámico de llamadas de proceso almacenadas para recuperar datos, y los datos de cada llamada se almacenan en una ubicación totalmente diferente. Luego necesito volver a renderizar una vez que todos los datos se reciben y están disponibles. Estoy usando promesas con axios.

Como el número de llamadas axios es dinámico, estoy construyendo una matriz e insertándola enaxios.all como sigue:

let promises = [];

for (let i = 0; i < requests.length; i++) {
    promises.push(axios.get(request[i].url, { params: {...} }));
}

axios.all(promises).then(/* use the data */);

El problema es que cada solicitud de axios devuelve datos que se agregan a un objeto en un lugar totalmente diferente. Como no tengo forma de ponerlos todos en el lugar correcto de una sola vezthen (¿cómo sabría qué respuesta va en qué ubicación?), intenté hacer algo como esto:

let promises = [];

for (let i = 0; i < requests.length; i++) {
    promises.push(
        axios.get(request[i].url, { params: {...} })
            .then(response => {myObject[request[i].saveLocation] = response.data;})
    );
}

axios.all(promises).then(/* use the data */);

Sin embargo, esto no funciona como esperaba. losthen después de cadaget se ejecuta, pero no hasta mucho después dethen adjunto aaxios.all. Obviamente, esto es un problema porque mi código intenta usar los datos antes de que se hayan guardado en el objeto.

¿Hay alguna manera de tener un separadothen llame para cadaaxios.get que se ejecutará después de que se resuelva su promesa correspondiente, y luego tendrá un finalthen que se ejecutará solo despuéstodas de las promesas resueltas, ¿utilizar los datos ahora que el objeto ha sido poblado?