推荐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 中。
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http请求
- 支持PromiseAPI
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御XSRF
