JS中如何处理多个ajax并发请求？

js中的多并发处理。

通常 为了减少页面加载时间，先把核心内容显示处理，页面加载完成后再发送ajax请求获取其他数据

这时就可能产生多个ajax请求，为了用户体验，最好是发送并行请求，这就产生了并发问题，应该如何处理？

（1）并行改串行

如果业务逻辑和用户体验允许的情况下，可以改为串行，处理起来最简单

function async1(){
//do sth...
async2();
}
function async2(){
//do sth...
}
async1();

（2）回调计数

function async1(){
//do sth...
callback();
}
function async2(){
//do sth...
callback();
}
function callback(){
cnt++;
if(2==cnt) console.log('都已执行完毕');
}

（3）循环非阻塞

function async1(){
//do sth...
cnt++;
}
function async2(){
//do sth...
cnt++;
}
var interval = setInterval(function(){
if(2===cnt){
console.log('已执行完成');
clearInterval(interval)
}
};

这个方法采用了定时间隔触发器，占用CPU比较多，建议酌情使用

（4）jquery

使用jquery的延时处理方法，每个ajax请求完成后，把对应的Deferred置为完成状态，然后用jquery判断全部完成后再进行后续处理

var d1 = $.Deferred();
var d2 = $.Deferred();

function async1(){
d1.resolve( "Fish" );
}

function async2(){
d2.resolve( "Pizza" );
}

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

另：ajax时异步请求不会出现堵塞情况。

$.when($.ajax, $ajax).done(function() { balabala })

转载：

经常在写代码的时候碰到这样的场景：页面初始化时显示loading页，同时启动多个ajax并发请求获取数据，当每个ajax请求返回时结束loading。 
举个例子，一个下订单的页面，要查询常用地址信息、商品信息、地市信息…而这些请求都是异步的，希望等到所有数据加载完成后再允许用户操作。 
要实现这个场景容易碰到的一个问题就是多并发怎么控制？下面是一些解决方法和思路： 

并行改为串行 
如果业务逻辑本身是串行的，但是提供的请求方式又是异步的，可以考虑此方法。 
但本场景显然不是这种情况，这样做大大降低了页面性能，延长了加载速度。 

回调 
只适合并发数少的情况，多层嵌套回调会让代码的可读性大大降低 

Java代码 

1. function async1(){  
2.     //do sth...  
3. }  
4. function async2(){  
5.     //do sth...  
6.     async1();  
7. }  
8. async2();  

ajax改为同步  

如在jquery中将async参数设置为false。 

Java代码 

1. $.ajax({  
2.     url:"/jquery/test1.txt",  
3.     async:false  
4. });  

设置结束标识  
简单一点的可以设置计数器，每完成一个异步函数加1，或者设置一个数组，每执行完一个异步函数更新数组。 

回调计数  

Js代码 

1. var cnt = 0;  
2. function async1(){  
3.     //do sth...  
4.     callback();  
5. }  
6. function async2(){  
7.     //do sth...  
8.     callback();  
9. }  
10. function callback(){  
11.     cnt++;  
12.     if(2==cnt) console.log('都已执行完毕');  
13. }  

循环阻塞 

Java代码 

1. var cnt = 0;  
2. function async1(){  
3.     //do sth...  
4.     cnt++;  
5. }  
6. function async2(){  
7.     //do sth...  
8.     cnt++;  
9. }  
10. while(2>cnt){}  

循环非阻塞  

不建议过多使用，以免影响性能 

Js代码 

1. var cnt = 0;  
2.   
3. function async1(){  
4.     //do sth...  
5.     cnt++;  
6. }  
7. function async2(){  
8.     //do sth...  
9.     cnt++;  
10. }  
11. var interval = setInterval(function(){  
12.     if(2===cnt){  
13.         console.log('已执行完成');  
14.         clearInterval(interval)  
15.     }  
16. }, 0);  

第三方框架实现  
jquery  

目前我在项目中采用的方式 

Java代码 

1. var d1 = $.Deferred();  
2. var d2 = $.Deferred();  
3.   
4. function async1(){  
5.     d1.resolve( "Fish" );  
6. }  
7.   
8. function async2(){  
9.     d2.resolve( "Pizza" );  
10. }  
11.   
12. $.when( d1, d2 ).done(function ( v1, v2 ) {  
13.     console.log( v1 + v2 + '已完成');  
14. });  

angular  

具体代码不写了，可以参考API文档中关于 $watch 的说明。