Axios: chaining multiple API requests

First off, not sure you want to do this in your componentWillMount, it's better to have it in componentDidMount and have some default states that will update once done with these requests. Second, you want to limit the number of setStates you write because they might cause additional re-renders, here is a solution using 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,  });}

A little late to the party, but I like this pattern of chaining promises, returning them to keep the promise chain alive.

axios  .get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1)  .then(response => {    this.setState({ p1Location: response.data });    return axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2);  })  .then(response => {    this.setState({ p2Location: response.data });    return axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p3);  })  .then(response => {    this.setState({ p3Location: response.data });  }).catch(error => console.log(error.response));

Have you used axios.all ? You can try with something similar:

axios.all([axios.get(`firstrequest`),           axios.get(`secondrequest`),           axios.get(`thirdrequest`)])     .then(axios.spread((firstResponse, secondResponse, thirdResponse) => {           console.log(firstResponse.data,secondResponse.data, thirdResponse.data);     }))     .catch(error => console.log(error));

This will take all your get and will put it inside a response that has to be called with .data like: firstResponse.data