Axios: 複数のAPIリクエストを連結する

質問

Google Maps APIからいくつかのAPIリクエストをチェーンする必要があり、Axiosでそれを行おうとしています。

以下は最初のリクエストで、componentWillMount()の中です。

axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1)
  .then(response => this.setState({ p1Location: response.data }))  }

2番目のリクエストはこちらです。

axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2)
  .then(response => this.setState({ p2Location: response.data }))

次に、最初の2つが完了することに依存する3つ目の要求があります。

axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + this.state.p1Location.results.place_id + '&destination=place_id:' + this.state.p2Location.results.place_id + '&key=' + 'API-KEY-HIDDEN')
  .then(response => this.setState({ route: response.data }))

この3つの呼び出しをチェーンして、最初の2つの呼び出しの後に3つ目が起こるようにするにはどうすればよいでしょうか？

どのように解決するのですか？

まず最初に、これを componentWillMount の中に置いた方が良いでしょう。 componentDidMount で、これらのリクエストが完了したら更新されるデフォルトのステートをいくつか用意しておくとよいでしょう。次に、追加の再レンダリングを引き起こす可能性があるため、書くsetStatesの数を制限したい場合、async/awaitを使用した解決策を紹介します。

async componentDidMount() {

  // Make first two requests
  const [firstResponse, secondResponse] = await Promise.all([
    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p1}`),
    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p2}`)
  ]);

  // Make third request using responses from the first two
  const thirdResponse = await axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + firstResponse.data.results.place_id + '&destination=place_id:' + secondResponse.data.results.place_id + '&key=' + 'API-KEY-HIDDEN');

  // Update state once with all 3 responses
  this.setState({
    p1Location: firstResponse.data,
    p2Location: secondResponse.data,
    route: thirdResponse.data,
  });

}