CODEWITHSUNDEEP
reactjsapigetaxios
Oktam Yaqubov
Oktam Yaqubov

Reputation: 113

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.

Upvotes: 1

Views: 1290

Answers (2)

Gowrishankar R
Gowrishankar R

Reputation: 21

Yes, Axios will satisfy your needs. Go ahead and complete it.

Upvotes: 0

Agnola Tommaso
Agnola Tommaso

Reputation: 36

I think Axios all is the best solution...

I also recommend you to take a look at this link, where a great solution to the execution of multiple asynchronous calls is proposed: AsynPipe

Upvotes: 2

Related Questions