Is it possible to use axios.all with a then() for each promise? : <p>I have a React component that triggers an event to fetch data.  This results in a dynamic number of stored proc calls to fetch data, and the data from each call is stored in a totally different location.  Then I need to re-render once all of the data is received and available.  I'm using promises with axios.</p>

<p>Since the number of axios calls is dynamic, I'm building an array and inserting it into <code>axios.all</code> as follows:</p>

<pre><code>let promises = [];

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

axios.all(promises).then(/* use the data */);
</code></pre>

<p>The problem is that each axios request returns data that gets added to an object in a totally different place.  Since I have no way to put them all in the correct place in a single <code>then</code> (how would I know which response goes in which location?), I tried doing something like this:</p>

<pre><code>let promises = [];

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

axios.all(promises).then(/* use the data */);
</code></pre>

<p>However, this doesn't work as I expected.  The <code>then</code> after each <code>get</code> is executed, but not until well after the <code>then</code> attached to <code>axios.all</code>.  Obviously this is a problem because my code tries to use the data before it has been saved to the object.</p>

<p>Is there a way to have a separate <code>then</code> call for each <code>axios.get</code> that will be executed after its corresponding promise is resolved, and then have a final <code>then</code> that will be executed only after <em>all</em> of the promises are resolved, to use the data now that the object has been populated?</p>
