如何在两个不同的选项卡中并行运行两个请求 Reactjs

Question

我有一个反应组件，它在循环中从后端（django）请求图像，我收到一个图像作为每个请求的响应，并且它正在循环中发生，因此当它被渲染时，它以正在渲染多个的视频形式运行图像以快速的方式变成视频，我还有另一个注册用户的组件，这两个组件都运行良好。

但是当我像在一个选项卡中运行的视频一样并行运行它们并在另一个选项卡中注册用户时，它们没有并行运行，我必须停止视频请求然后注册请求完成。如何在视频请求运行时注册用户它不应该等待视频停止。

视频组件在recognize.js文件中

 runInfinite=()=>{


        let payload={
            iterator:this.state.iterator
        };

          axios.post('http://127.0.0.1:8000/faceapp/process_image/', payload)
              .then(res => {
                  this.setState({baseimage: res.data});
                  this.setState({iterator:this.state.iterator+1})
              })


    };

render(){
      if (this.state.flag){
                this.runInfinite()
      }
      return(
            <div>
                  {this.state.baseimage?<img  src={"data:image/png;base64," +  this.state.baseimage}/>:null}
           </div>
           )
}

用户在注册组件中注册：

 axios.post(' http://127.0.0.1:8000/faceapp/create_user/',payload)
                .then(res=>{

                    if (res.status===201){
                        this.setState({status:<img alt src={require('../assets/images/tick.png')} width="20" height="20"/>});

                    }


                    for (let i=0;i<this.state.images.length;i++) {

                        let formdata2=new FormData();
                        formdata2.append("user_image",this.state.images[i][0]);
                        axios.put('http://127.0.0.1:8000/faceapp/manage_user/'+res.data.id+'/',formdata2)
                            .then(res=>{
                                console.log(res)
                            });



                        for (let j=0;j<this.state.images[i].length;j++){

                            let formdata=new FormData();
                            formdata.append("user",res.data.id);
                            formdata.append("user_image",this.state.images[i][j]);

                            if (j!==0) {  // as first image is main so neglect main image in multiple images

                                axios.post('http://127.0.0.1:8000/faceapp/create_user_image/', formdata)
                                    .then(res => {
                                        console.log(res)
                                    })
                            }
                        }


                    }
                })
                .catch(err=>{
                    this.hideLoader();
                    this.setState({status:<img alt src={require('../assets/images/cross.png')} width="20" height="20"/>});
                })

如果视频请求在识别.js 文件中运行，我如何在 register.js 文件中同时在其他选项卡中运行注册请求

Answer 1

您可以使用Promise.all并行（又名并发）运行它。

let p1 = new Promise(function(resolve,reject){

    // first request 
    axios.post('url1', payload).then(res => {

            /** code **/
            resolve();
    })
})

let p2 = new Promise(function(resolve,reject){

    axios.post('url2', payload).then(res => {

        /** code **/
        resolve();
    })

})

let p = Promise.all([p1,p2]).then(()=>{
    // after completing both the requests 
})