Managing multiple HTTP request operations in React Js

Now I'm working on a little bigger project at ReactJS. I have one page now, I need to get data from several URLs (APIs) for that page. That is, I need to get more than 40 results list like this: city, county, category, gender and so on. It all comes in separate URLs. It's like that:

https://API_URL/users
https://API_URL/country-list
https://API_URL/city
https://API_URL/gender
and etc...

I am currently using the following to get one.

componentDidMount() {
     this.setState({
         isLoading: true
     });
     axios.get(API_URL + '/country-lists', {
             headers: {
                 Authorization: GetTokens
             }
         })
         .then(response => response.data)
         .then(
             (result) => {
                 this.setState({
                     countries: result.data,
                     isLoading: false
                 });
             },
             (error) => {
                 this.setState({
                     error,
                     isLoading: false
                 });
             }
         )
 }

I found a few extra options, like promises, axios.all(). But I'm wondering if they can be a complete solution.

axios.all([
axios.get(https://API_URL/users'),
axios.get(https://API_URL/country-list'
     ...)
    ])
.then(axios.spread((countries, users) => {
 // ... });

And

Promise.all([users, countries, products]).then(function(values) {
...
});

Which way should you use to get such data's Or is there a better solution to get? At the same time, taking into the Internet connection and the various errors.