title: Is it possible to use axios.all with a then() for each promise?
body: <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>