发送多个异步请求 ;发送多个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
posted @ 2020-06-28 15:57  hao_1234_1234  阅读(138)  评论(0编辑  收藏