发送多个异步请求 ;发送多个ajax请求

两种方案： https://segmentfault.com/q/1010000004961132

方案一：使用jquery自带的when

var a=$.ajax() 
var b=$.ajax()

 var ajaxArr=[a,b]

$.when(ajaxArr).then(function(){
    // 结束
})


方案二: 用全局变量 标识数量，当

var ajaxCount = 10 ; 
var ajaxFinished = function(){
    if(ajaxCount > 0){// 不做任何处理}
    else{
      // 请求全部完成，做该做的事情
    }
}

$.ajax(xxx1).then(function(){
  ajaxCount --; 
  ajaxFinished(); 
});
$.ajax(xxx2).then(function(){
  ajaxCount --; 
  ajaxFinished(); 
})


ajax的 then 不管延迟成功还是失败都会执行。

第二种方案的适用性更广，在vue中可能没有ajax when、then这种工具。
但是你可以在vue 的异步请求，成功和失败都去执行下面代码： 

  ajaxCount --; 
  ajaxFinished(); 

//方案一应用方式一

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

pointMap(list, id, name) {     //console.log('pointMap', list, id, name)       var that = this;     if (list != undefined && list != null && list.length > 0) {           var mydata = [];         var urlPartApi = "//api.map.baidu.com/geoconv/v1/?coords=";         var urlPartPms = "";         var urlPartTo = "&from=1&to=5&ak=";         var urlPartAK = urlAK;         var arrAll = chunk(list, 100);         //console.log('arrAll', arrAll);         var arrAjax = [];         for (var m = 0, len = arrAll.length; m < len; m++) {             var arrM = arrAll[m];             var parameter1 = "";             for (var n = 0, lenN = arrM.length; n < lenN; n++) {                 var item = arrM[n];                 if (n < lenN - 1) {                     parameter1 += item.Longitude + "," + item.Latitude + ";";                 } else {                     parameter1 += item.Longitude + "," + item.Latitude;                 }             }             //console.log('parameter1', parameter1);             if (m == 0) {                 parameter1 = "abc454,aed2334";             }             var urlPms = urlPartApi + parameter1 + urlPartTo + urlPartAK;             var ajax1 = null;             ajax1 = $.ajax({                 url: urlPms,                 type: "GET",                 dataType: 'jsonp',                 //jsonp: 'callback',//加上这两列会导致数据确实                 //jsonpCallback: 'jsonpCallback',//加上这两列会导致数据确实                              })             arrAjax.push(ajax1);           }           console.log('arrAjax', arrAjax);         $.when(arrAjax).then(function (result) {             console.log('result', result); //注意这里还没有请求数据             var resultList = [];             //function 是一个闭包,它会后台继续执行，但程序继续向下执行             for (var i = 0; i < result.length;i++) {                 result[i].success(function (data) {//success只返回多个请求中成功部分<br>                                    resultList.push(data.result);                 })             }             console.log('resultList', resultList);         })         }   },

　

////方案一应用方式二
思路来源：https://m.jb51.cc/jquery/178436.html

也是只返回多个请求中成功部分，区别就是后者每次请求都调用一次then，返回result，最后的results 就是返回值。

   

                pointMap(list, id, name) {
                    //console.log('pointMap', list, id, name)
                   
                    var that = this;
                    if (list != undefined && list != null && list.length>0) {

                        var mydata = [];
                        var arrAll = chunk(list, 100);
                        //console.log('arrAll', arrAll);
                        var arrAjax = [];
                        var arrALLPms = [];
                        for (var m = 0, len = arrAll.length; m < len; m++) {
                            var arrM = arrAll[m];
                            var parameter1 = "";

                            for (var n = 0, lenN = arrM.length; n < lenN; n++) {
                                var item = arrM[n];
                                if (n < lenN-1) {                   
                                    parameter1+= item.Longitude + "," + item.Latitude + ";";
                                } else {
                                    parameter1 += item.Longitude + "," + item.Latitude;
                                }
                            }
                            if (m == 0||m==1) {
                                parameter1 = "abc454,aed2334;";//错误项测试
                            }
                            arrALLPms.push(parameter1);
                            //console.log('parameter1', parameter1);


                        }

                        var promises = arrALLPms.map(getMapData);
                        //console.log('promises', promises);
                        somePromise(promises).then(function (results) {
                           console.log('results', results);
                            for (var i = 0; i < results.length; i++) {
                                mydata = mydata.concat(results[i]);
                              }
                           console.log('mydata', mydata);
                           
                      
              
                        });

                    }
              
                },

 //输入所有成功项，某个失败不影响输出。
    function somePromise(promises) {
        var d = $.Deferred(), results = [];
        var remaining = promises.length;
        for (var i = 0; i < promises.length; i++) {
            promises[i].then(function (res) {
                results.push(res); 
            }).always(function (res) {
                remaining--; 
                if (!remaining) d.resolve(results);
　　　　　　　　　　//当i等于 promises.length-1时，remaining等于1，remaining-- 后变成0，if(!0)为true 
            })
        }
        return d.promise(); 
    }

    function getMapData(vid) {
        var url = "//api.map.baidu.com/geoconv/v1/?coords={{vid}}&from=1&to=5&ak=" + urlAK;
        var urlPms = url.replace('{{vid}}', vid);
        return $.ajax({
                 url: urlPms,
                 type: "GET",
                 dataType: 'jsonp',
                 //jsonp: 'callback',//加上这两列会导致数据缺失 
                //jsonpCallback: 'jsonpCallback',//加上这两列会导致数据缺失 
                               
        }).then(function (res) {
         
            return res.result;
            //{ video: vid, result: res.result };//可以带一些主键
        });

    }

 

　注意：跨域要使用 jsonp，但是加上这两列会导致数据缺失

   //jsonp: 'callback',//加上这两列会导致数据确实

   //jsonpCallback: 'jsonpCallback',//加上这两列会导致数据确实  

 

我个人倾向于选择方案一应用方式二

 

如果看不懂，需要先看看这篇文章：jQuery的deferred对象详解

http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

https://www.cnblogs.com/hao-1234-1234/p/13219444.html