前端一次同时发送多个http请求,模拟后端并发

前端可以做并发吗
答案是:理论上可以,实际操作可能会有点差强人意。javascript没有多线程这样一个说法,其次,不建议使用这种方式解决问题,多线程应该交给后台去做

首先我们会想到第一个很实际的方式采用
setInterval(function) 定时器异步调用
callee() – 触发函数的自我递归方法

let  n=5;   //请求的数量
 4 setInterval(function(){
 5     //创建一批10个“线程”
 6     for(let k=0;k<n;k++){
 8         //使用匿名函数(方便直接自我递归调用)
 9         (function(){
10             //如果所有数据已处理完,退出(略)
11             //获取一批未处理的记录(略)
12             let funarg = arguments;//得到匿名函数本身引用
13             ajax 方法区
25         })();
26     }
27 },200);

这种方式虽然可以实现,但是不免有太多的循环,也可能因为一个程序阻塞导致整个逻辑异常

axios.all() axios 作为我们普遍使用调用服务方式
axios.all()、axios.spread()
两个辅助函数用于处理同时发送多个请求,可以实现在多个请求都完成后再执行一些逻辑。注意:该方法是axios的静态方法,不是axios实例的方法!
以在Vue中使用为例

methods:{
    getTset1 (data){
     console.log('调用第一个接口')
     return this.$axios({
              url:'...',
              method:'GET',
              params data
            })
    },
    getTest2(data){
     console.log('调用第二个接口')
     return this.$axios({
                url:'...',
                method:'GET',
                params data
              })
    },
 getALL(){
    var _this = this; 
    this.$axios.all([_this.getAllTask(),_this.getAllCity()])
    .then(_this.$axios.spread(function(allTask, allCity){
        console.log('所有请求完成')
        console.log('请求1结果',allTask)
        console.log('请求2结果',allCity)
    }))
  } 
},

mounted(){
this.getALL()
}
  

调用接口可查看到
前端一次同时发送多个http请求,模拟后端并发_第1张图片
个人推荐使用Axios.all 毕竟有轮子了就不要再自己造了,当然场景一定是必须的时候再使用

你可能感兴趣的:(js,javascript)