有的时候同一个页面被可能同时产生多个ajax请求,为了用户体验,最好是发送并行请求,这就产生了并发问题,应该如何处理?
并行改串行
这种方法是最简单的了,就是在一个请求执行完后在执行另一个请求。代码如下:
1)在回调中执行下一请求
- functionasync1(){
- //dosth...
- async2();
- }
- functionasync2(){
- //dosth...
- }
- async1();
2)将 ajax 改为同步,按顺序执行
- varurl1,url2;
- $.ajax({
- url:url1,async:false
- });
- $.ajax({
- url:url2,async:false
- });
使用计数器
就是使用一个标志位标记请求是否已经完成
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();
第三方框架实现
若使用第三方框架实现,则要看第三方的相关文档:
1)jquery
- 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+'已完成');
- });
2)axios
- //下面是关于同时发起多个请求时的处理
- axios.all([get1(),get2()])
- .then(axios.spread(function(res1,res2){
- //只有两个请求都完成才会成功,否则会被catch捕获
- }));
还有很多框架都可以,比如Angular的$wacth等等
ES6来实现
使用ES6中的promise、asyn、await等应该都可以实现,由于本人尚未使用过,暂时不讲,到时候再补充。