ajax请求串行和并行的问题

两个问题:

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


  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值