JS前端发起多个Ajax请求
页面可能产生多个ajax请求(不定数量的),为了用户体验,最好是发送并行请求,这就产生了并发问题,应该如何处理?
串行处理
串行处理的缺点就是会比较慢;
var Data=[];
for(var i=0;i<urlArray.length;i++){
//异步
$.ajax({
url:urlArray[i],
type:"POST",
async:false,
data:requestBody,
success:function(ctData){Data.push(ctData)},
datatype: 'json'})
}
//数据都回来,之后一起处理
回调处理
利用闭包把数据按照请求的顺序放到对应的位置,然后请求数据全回来了一起处理:
var DataAjax=[];
var count=0;
var succFunc=function(i){
return function(ctData){
debugger
count++;
DataAjax[i]=ctData
if (count==urlArray.length){
DataProcess(myChart,DataAjax,option,element);
}
return chartData
}
}
for(var i=0;i<urlArray.length;i++){
DataAjax[i]=[]
$.ajax({
url:urlArray[i],
type:"POST",
data:requestBody,
success:succFunc(i),
fail:function(ctData){return []},
datatype: 'json'})
}
循环等待(不推荐)
循环等待,这样会比较消耗cpu;
var cnt = 0;
function async1(){
//do sth...
cnt++;
}
function async2(){
//do sth...
cnt++;
}
while(2>cnt){}
Jquery并发包
在ES5的实现方式如下,在提取返回值时,需要判断arguments的数量:
var DataAjax=[];
for(var i=0;i<urlArray.length;i++){
var tempajax=$.ajax({
url:urlArray[i],
type:"POST",
data:requestBody,
success:function(json){
return json
},
fail:function(chartData){return []},
datatype: 'json'})
DataAjax.push(tempajax)
}
$.when.apply($,DataAjax).done(function(){
var ctData=[]
if(urlArray.length>1){
for(var i in arguments){
ctData[i]=arguments[i][0]
}
}else{
ctData.push(arguments[0])
}
DataProcess(myChart,ctData,option,element);
})
高版本支持Promise
用到再补充....
拓展延伸待思考
并发的时候,限制并发的数量。