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

用到再補充....

拓展延伸待思考

並發的時候，限制並發的數量。