发送多个异步请求 ;发送多个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(); 

//方案一应用方式一

                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只返回多个请求中成功部分
                                    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