发送多个异步请求 ;发送多个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();
//方案一应用方式一
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
树立目标,保持活力,gogogo!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· 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工具