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

本文探讨了前端如何实现并发,虽然JavaScript没有多线程,但可以通过axios.all来同时发送多个HTTP请求。文章建议在必要时使用这种方法,并提供了在Vue中使用axios.all的例子。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端可以做并发吗
答案是:理论上可以,实际操作可能会有点差强人意。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()
}
  

调用接口可查看到
在这里插入图片描述
个人推荐使用Axios.all 毕竟有轮子了就不要再自己造了,当然场景一定是必须的时候再使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值