请求多并发

前端之家收集整理的这篇文章主要介绍了请求多并发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

有的时候同一个页面被可能同时产生多个ajax请求,为了用户体验,最好是发送并行请求,这就产生了并发问题,应该如何处理?

并行改串行

这种方法是最简单的了,就是在一个请求执行完后在执行另一个请求。代码如下:

1)在回调中执行下一请求

functionasync1(){
//dosth...
async2();
}

functionasync2(){
//dosth...
}

async1();

2)将 ajax 改为同步,按顺序执行

varurl1,url2;

$.ajax({
url:url1,async:false
});

$.ajax({
url:url2,async:false
});
@H_403_28@很显然,这种方法会需要比较长的等待时间,用户体验不是很好。

使用计数器

就是使用一个标志位标记请求是否已经完成

1)循环非阻塞

这种方法会影响性能,尽量少用:

varcnt=0;

functionasync1(){
//dosth...
cnt++;
}

functionasync2(){
//dosth...
cnt++;
}

async1();
async2();

varinterval=setInterval(function(){
if(2===cnt){
console.log('已执行完成');
clearInterval(interval)
}
},0);

2) 回调计数

varcnt=0;

functionasync1(){
//dosth...
callback();
}

functionasync2(){
//dosth...
callback();
}

functioncallback(){
cnt++;
if(2==cnt)
console.log('都已执行完毕');
}

async1();
async2();

第三方框架实现

若使用第三方框架实现,则要看第三方的相关文档:

1jquery

vard1=$.Deferred();
vard2=$.Deferred();

functionasync1(){
d1.resolve("Fish");
}

functionasync2(){
d2.resolve("Pizza");
}

async1();
async2();

$.when(d1,d2).done(function(v1,v2){
console.log(v1+v2+'已完成');
});

2axios

//下面是关于同时发起多个请求时的处理
axios.all([get1(),get2()])
.then(axios.spread(function(res1,res2){
//只有两个请求都完成才会成功,否则会被catch捕获
}));

还有很多框架都可以,比如Angular$wacth等等

ES6来实现

使用ES6中的promiseasynawait等应该都可以实现,由于本人尚未使用过,暂时不讲,到时候再补充。

原文链接:https://www.f2er.com/ajax/161006.html

猜你在找的Ajax相关文章