拥抱基于jquery.deferred的ajax,和层层嵌套回调的ajax说拜拜

Posted 2020-08-21

前言

在项目中，无论是维护自己的代码，还是重构他人的项目代码，看到层层嵌套，异常冗余的某个function，那时我们的内心肯定是奔溃的！

在jquery1.5版本之前，如果我们某个操作需要多个ajax异步请求成功后执行，只能在前一个ajax成功的回调函数中接着发送ajax请求，这样一来，不光代码的可读性变得异常差，而且也失去了异步的意义。

jquery开发者果然在1.5版本后引入了deferred延迟对象。而jquery.ajax也基于它迎来了巨变,我们先对比下有哪些区别。

传统ajax和现代ajax

传统ajax写法：

　　$.ajax({
　　　　url: "xx.html",
       data :{},
　　　　success: function(){
　　　　　　alert("成功了！");
　　　　},
　　　　error:function(){
　　　　　　alert("出错啦！");

　　　　complete:function(){
　　　　　　alert("啦啦啦！");

　　　　} 　　});

现代ajax写法:

　　$.ajax({
　　　　url: "xx.html",
       data :{}
　　　})
.done( function(){
　　　　　　alert("成功了！");
　　　　　　})
.fail(function(){
　　　　　　alert("出错啦！");
　　　　　　})
.always(function(){
　　　　　　alert("啦啦啦！");
　　　　})

 

 基于现代ajax写法的$.when()方法

var ajax1= $.ajax({
                     url:‘xx.php‘,
                     data:{}
                    });
 var ajax2= $.ajax({
                     url:‘xxx.php‘,
                     data:{}
                    });    
var ajax3= $.ajax({
                     url:‘xxxx.php‘,
                     data:{}
                    });        
 $.when(ajax1,ajax2,ajax3)
      .done(function(a,b,c){
                   //dosomething
           })
       .fail(function(a,b,c){
                 //dosomething
            });              

 

 完美解决异步层层嵌套的问题，可读性大大提高。至于$.when(args)中的args,也就是a,b,c具体是什么，有兴趣的可以去打印出来看看哦