title: Axios: chaining multiple API requests
body: <p>I need to chain a few API requests from the Google Maps API, and I'm trying to do it with Axios.</p>
  
  <p>Here is the first request, which is in componentWillMount()</p>
  
  <pre><code>axios.get('https://maps.googleapis.com/maps/api/geocode/json?&amp;address=' + this.props.p1)
    .then(response =&gt; this.setState({ p1Location: response.data }))  }
  </code></pre>
  
  <p>Here is the second request:</p>
  
  <pre><code>axios.get('https://maps.googleapis.com/maps/api/geocode/json?&amp;address=' + this.props.p2)
    .then(response =&gt; this.setState({ p2Location: response.data }))
  </code></pre>
  
  <p>Then we have a third request, which is dependent on the first two being completed:</p>
  
  <pre><code>axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + this.state.p1Location.results.place_id + '&amp;destination=place_id:' + this.state.p2Location.results.place_id + '&amp;key=' + 'API-KEY-HIDDEN')
    .then(response =&gt; this.setState({ route: response.data }))
  </code></pre>
  
  <p>How can I chain these three calls so that the third happens after the first two?</p>