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

用到再补充....

拓展延伸待思考

并发的时候，限制并发的数量。

来源：https://www.cnblogs.com/meiguhuaxian/p/12556775.html

标签

var

ajax