AXIOS multiple response and then()

Question

i am currently using axios to request 1 URL however I want to be able to do multiple URLs at once - which according to the documentation I should be able to do.

the issue comes down to that I need to be able to send the result like the following

axios.get('https://nominatim.openstreetmap.org/search.php?city=' + e + '&countrycodes=AU&boundary=administrative&featuretype=county|state&polygon_geojson=1&format=json')
                .then(response => {
                    console.log(response);
                    return response.data.map(user => ({
                        Id: `${user.osm_id}`,
                        name: `${user.place_id}`,
                        type: `${user.geojson.type}`,
                        Company: `${user.display_name}`,
                    }));
                })
                .then(users => {
                    this.setState({
                        users,
                        isLoading: false
                    });
                    document.getElementById("results").style.display="block";
                   // alert(JSON.stringify(this.state.users))
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                })
                .then(function () {
                    // always executed
                    
                });

And the documentation for multiple URL request don't seem to allow this.

import axios from 'axios';
 
let one = "https://api.storyblok.com/v1/cdn/stories/health?version=published&token=wANpEQEsMYGOwLxwXQ76Ggtt"
let two = "https://api.storyblok.com/v1/cdn/datasources/?token=wANpEQEsMYGOwLxwXQ76Ggtt"
let three = "https://api.storyblok.com/v1/cdn/stories/vue?version=published&token=wANpEQEsMYGOwLxwXQ76Ggtt"
 
const requestOne = axios.get(one);
const requestTwo = axios.get(two);
const requestThree = axios.get(three);
 
axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => {
  const responseOne = responses[0]
  const responseTwo = responses[1]
  const responesThree = responses[2]
  // use/access the results 
})).catch(errors => {
  // react on errors.
})

However, I can't see a way that I can then use each data response I currently do.

Answer 1

You can try the following solutions:-

Solution 1

const func = async () => {
    try {
        const responses = await axios.all([requestOne, requestTwo, requestThree]);
        const responseOne = responses[0]
        const responseTwo = responses[1]
        const responesThree = responses[2]
        /*
            update your state and UI
        */
        this.setState({
            /* set your state according to responses */
        })
    }
    catch(err) {
        console.log("ERROR", err);
    }
}

Solution 2

axios.all([requestOne, requestTwo, requestThree])
.then(axios.spread((...responses) => {
  const responseOne = responses[0]
  const responseTwo = responses[1]
  const responesThree = responses[2]
  /*
    process the responses and return in an array accordingly.
  */
  return [
      responseOne.data,
      responseTwo.data,
      responesThree.data,
  ];
}))
.then(arr => {
    console.log("arr", arr);
    /*
        update your state and UI
    */
    this.setState({
            /* set your state according to responses */
    })
})
.catch(errors => {
    console.log("ERRORS", errors);
})