两个问题:
1.有三个ajax请求,如何让这三个ajax请求串行执行,即第一个执行完成后在执行另一个?
2.如何让他们并行执行,然后三个请求都执行完成后,再执行某个操作?
//串行执行分两种。
//一是用同步模式async: false,三个ajax请求连着写就可以了。
$.ajax({
url: "ajax请求1",
async: false,
success: function (data) {
console.log("ajax请求1 完成");
}
});
$.ajax({
url: "ajax请求2",
async: false,
success: function (data) {
console.log("ajax请求2 完成");
}
});
$.ajax({
url: "ajax请求3",
async: false,
success: function (data) {
console.log("ajax请求2 完成");
}
});
//二是用异步模式async: true,三个ajax请求嵌套写。
$.ajax({
url: "ajax请求1",
async: true,
success: function (data) {
console.log("ajax请求1 完成");
$.ajax({
url: "ajax请求2",
async: true,
success: function (data) {
console.log("ajax请求2 完成");
$.ajax({
url: "ajax请求3",
async: true,
success: function (data) {
console.log("ajax请求3 完成");
}
});
}
});
}
});
//并行执行就只能用异步模式。并设置变量进行计数
var num = 0;
function isAllSuccess() {
num++;
if (num>=3)
console.log("三个ajax请求全部完成");
}
$.ajax({
url: "ajax请求1",
async: true,
success: function (data) {
console.log("ajax请求1 完成");
isAllSuccess();
}
});
$.ajax({
url: "ajax请求2",
async: true,
success: function (data) {
console.log("ajax请求3 完成");
isAllSuccess();
}
});
$.ajax({
url: "ajax请求3",
async: true,
success: function (data) {
console.log("ajax请求3 完成");
isAllSuccess();
}
});
目前ES6中Promise可以用.then链也可以实现多层异步回调的问题,ES7中的Async和Await解决了.then链复杂的写法。await是等待一个Promise对象或者一个表达式的值;如果await等待的是一个Promise对象,那么就会阻塞后面的代码来等待Promise对象resolve,等resolve完成将resolve结果返回实现回调;这样的话,用一个aync和多个await就可以轻松的完成多层嵌套异步回调,且写法优雅,代码简单。
我的Github上有案例源码:https://github.com/spicyboiledfish/JavaScript-testJS/blob/master/53.全面理解ES6中的Promise.html
具体详解请查看下面两篇博客:
ES6中的Promise: http://www.cnblogs.com/lvdabao/p/es6-promise-1.html
ES7中的async和await:http://blog.csdn.net/hj7jay/article/details/61191416