Issue
I'm calling almost 7 services in my component, they way I'm calling is mentioned below. Now I want that there should be a good and proper way for this. Right now I'm facing the issue is like if any one service loaded earlier so the loaded service hide he loader and screen stuck for 5 to 6 seconds because of other services loading. Please provide me a good solution for it. Thanks in advance
componentDidMount() {
this.showLoader();
// service 1
axios.get(this.apiUrl + '/service1para', { headers: { Authorization: 'bearer ' + this.state.jwtToken } })
.then((response) => {
this.setState({ clients: response.data.retrn });
this.hideLoader();
}).catch(err => console.log(err));
// service 2
axios.get(this.apiUrl + 'serivce2para', { headers: { Authorization: 'bearer ' + this.state.jwtToken } })
.then((response) => {
this.setState({ clients: response.data.retrn });
this.hideLoader();
}).catch(err => console.log(err));
// service 3
axios.get(this.apiUrl + 'serivce3para', { headers: { Authorization: 'bearer ' + this.state.jwtToken } })
.then((response) => {
this.setState({ clients: response.data.retrn });
this.hideLoader();
}).catch(err => console.log(err));
// service 4
axios.get(this.apiUrl + 'serivce4para', { headers: { Authorization: 'bearer ' + this.state.jwtToken } })
.then((response) => {
this.setState({ clients: response.data.retrn });
this.hideLoader();
}).catch(err => console.log(err));
// service 5
axios.get(this.apiUrl + 'serivce5para', { headers: { Authorization: 'bearer ' + this.state.jwtToken } })
.then((response) => {
this.setState({ clients: response.data.retrn });
this.hideLoader();
}).catch(err => console.log(err));
// service 6
axios.get(this.apiUrl + '/serivce6para', { headers: { Authorization: 'bearer ' + this.state.jwtToken } })
.then((response) => {
this.setState({ clients: response.data.retrn });
this.hideLoader();
}).catch(err => console.log(err));
}
Solution
The typical solution for this is to use Promise.all
(doc).
It takes an array of promises and returns a promise that :
- resolves the list of resolved values once all promises in the array are resolved
- rejects if any one of the promises rejects
So it would be something like this :
this.showLoader();
Pomise.all([
axios.get(this.apiUrl + '/service1para',
{headers:{Authorization:'bearer '+this.state.jwtToken}})
.then((response) => {
this.setState({ clients: response.data.retrn });
return Promise.resolve(response) // then it goes into the 'reponses' array below
})
.catch(err => console.log(err));),
axios.get(/* ... */), // same thing over again
/* ... */
])
.then((responses) => {
// here, responses[0] is the response of the first axios.get
// response[1] is the response of the second axios.get, etc ..., if needed
this.hideLoader()
})
Answered By - Emmanuel Meric de Bellefon
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.