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



//方案一应用方式一

 

////方案一应用方式二
思路来源: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 @   hao_1234_1234  阅读(527)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示