这次给大家带来用jq发送多个ajax然后执行回调的小技巧,用jq发送多个ajax然后执行回调的注意事项有哪些,下面就是实战案例,一起来看一下。
推荐axios.js
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http请求
支持PromiseAPI
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御XSRF
下文是基于jquery的代码非axios.js代码。
本人测试有效,如果有人用下面的方法还是行不通,可以在下面评论中说明。Axios.js是一个基于 promise 的 HTTP 库,建议大家到npm上浏览一下Axios.js,中文版传送门,以下的内容不重要。。。
这需求我见过的有两种解决方法:
(个人觉得还是第一种方法好些)
1.第一种是计数法,它需要在外面声明一个能够让每个回调访问到的变量,在每个请求成功的回调函数里将此变量加1,如果变量加到最大就执行回调,但是需要在每个请求成功的回调函数里做判断。
特点:由于ajax本来就是异步的,所以每个ajax彼此互不干扰,不必按照顺序一个接着一个加载,相对下面第二种总请求时间更短。
计数法的demo
function countAjax(arr,cb) { var len = arr.length, result = [], count = 0; for(let i=0; i<len; i++) { $.ajax({ type: arr[i].type, url: arr[i].url, success: function(res){ count++; result[i] = res; console.log("第" + ( i + 1 ) + "个ajax回调函数 " + res); if( count == len ) { cb(result); } } }); } }var arr = [{ url: "keepWords", type: "get"},{ url: "xx", type: "get"},{ url:"yy", type: "get"}]; countAjax(arr,function(result){ console.log("all of ajax is done",result); });
亲测有效,在服务器那头可以setTimeout模拟网络延迟
提示,如果有人用下面的方法还是行不通,可以在下面评论中说明!
2.第二种是利用promise,在上一个请求完事之后,发送下一个请求。
特点:每个ajax都要排队按顺序请求和响应,需要在上一个请求响应成功之后再进行下一个请求,是一个接着一个的。
promise的demo
function orderAjax(arr,cb) { var promise, result = []; for(let i=0,len=arr.length; i<len; i++) { if(!promise) { promise = $.ajax({ url: arr[i].url, type: arr[i].type }); }else { promise = promise.then(function(res) { result.push(res); console.log("第" + ( i ) + "个ajax回调函数 " + res); return $.ajax({ url: arr[i].url, type: arr[i].type }); }) } } promise.then(function(res){ result.push(res); console.log("第" + ( arr.length ) + "个ajax回调函数 " + res); cb(result); }); }var arr = [{ url: "keepWords", type: "get"},{ url: "xx", type: "get"},{ url:"yy", type: "get"}]; orderAjax(arr,function(result) { console.log('all of ajax is done',result); })
亲测有效,在服务器那头可以setTimeout模拟网络延迟
提示,如果有人用下面的方法还是行不通,可以在下面评论中说明!
另外强推荐axios.js
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
以上就是用jq发送多个ajax然后执行回调的小技巧的详细内容,更多请关注php中文网其它相关文章!
已抢186105个
抢已抢67086个
抢已抢352613个
抢已抢666562个
抢已抢121325个
抢已抢22155个
抢