如何在axios中调用多个服务，header react native

Question

我在我的组件中调用了近 7 个服务，它们的调用方式如下所述。现在我希望应该有一个好的和适当的方法。现在我面临的问题是，如果任何一项服务较早加载，因此加载的服务会隐藏他的加载程序，并且由于其他服务加载，屏幕会卡住 5 到 6 秒。请为我提供一个好的解决方案。提前致谢

     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));
        }

Answer 1

对此的典型解决方案是使用Promise.all (doc)。

它接受一组承诺并返回一个承诺：

• 在数组中的所有 promise 都被解析后解析解析值列表
• 如果有任何一个 Promise 拒绝，则拒绝

所以它会是这样的：

  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()
  })

Answer 2

你基本上可以做 axios.all 来解决所有的承诺，然后当它解决时，你现在可以清除加载器，比如

axios.all([
    axios.get(this.apiUrl + '/service1para', { headers: { Authorization: 'bearer ' + this.state.jwtToken } }),
    //all the other urls here
  ])
  .then(axios.spread((FirstRequestresponse, secondRequestResponse) => {
    // do what ever you want with both responses
    //you can now clear the loader
  })).catch(() =>{
    //you can as well clear the loader
  }) ;