jQuery之deferred优雅的异步处理方式

喜欢ヅ旅行 2022-03-11 02:37 222阅读 0赞

本例基于jquery1.9.1

## 示例1:多ajax链式调用 ##

$.ajax({
      url:"/app/1",
      success:fucntion(data){
          $.ajax({
              url:"/app/2",
              success:fucntion(data){
                    $.ajax({
                        "url":"/app/3",
                        "success":function(data){//do something.}
                    });
              }
        });
      }
    });

上面的代码相信很多人都写过，有没有更优雅的方式呢？  
从jq1.5之后就引入了deferred对象，ajax返回的就是defferrd对象，因此我们的程序可以改造为下面的方式

$.ajax({
       url:"/app/1"
    }).done(function(data1){//前一个ajax返回值
      $.ajax({
          url:"/app/2"
      })
    }).done(function(data2){//前一个ajax返回值
      $.ajax({
          url:"/app/3"
      })
    });

看起来是不是很吊的样子，这种链式写法看起来至少比嵌套干净了很多，可读性也很好。

## 示例2：多ajax异步调用，等待结果 ##

上面的代码估计很多人写过，为了解决等待多个ajax都返回之后，在去执行后面的任务,这样写性能很差，而且代码也很难维护。  
看看下面的新写法：

$.when($.get("/app/1",doCount),
           $.get("/app/2",doCount),
           $.get("/app/3",doCount)
    ).done(function(data1,data2,data3){
       alert("success！");
     })
     .fail(function(){ alert("fail！"); });

## Deferred常用api ##

$.ajax('data/url')
         .done(function(response, statusText, jqXHR){
             console.log(statusText);
         })
        .fail(function(jqXHR, statusText, error){
             console.log(statusText);
         })
         .always(function(){
            console.log('I will always done.');
         });

##  Deferred总结： ##

（1）  [$.Deferred()][.Deferred]  生成一个deferred对象。  
（2） [deferred.done()][deferred.done] 指定操作成功时的回调函数  
（3） [deferred.fail()][deferred.fail] 指定操作失败时的回调函数  
（4） [deferred.promise()][deferred.promise] 没有参数时，返回一个新的deferred对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署deferred接口。  
（5） [deferred.resolve()][deferred.resolve] 手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。  
（6）[deferred.reject()][deferred.reject] 这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。  
（7） [$.when()][.when] 为多个操作指定回调函数。  
（8）[deferred.then()][deferred.then] 有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。

> $.when($.ajax( "/main.php" ))  
> 　　**.then(successFunc, failureFunc );**

如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。

（9）[deferred.always()][deferred.always]

这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。

> $.ajax( "test.html" )  
> 　　.always( function() \{ alert("已执行！");\} );

上面有部分内容摘自[http://www.ruanyifeng.com/blog/2011/08/a\_detailed\_explanation\_of\_jquery\_deferred\_object.html][http_www.ruanyifeng.com_blog_2011_08_a_detailed_explanation_of_jquery_deferred_object.html]

本文原文地址：[https://blog.csdn.net/weixin\_34113237/article/details/88251117][https_blog.csdn.net_weixin_34113237_article_details_88251117]

[.Deferred]: http://api.jquery.com/category/deferred-object/
[deferred.done]: http://api.jquery.com/deferred.done/
[deferred.fail]: http://api.jquery.com/deferred.fail/
[deferred.promise]: http://api.jquery.com/deferred.promise/
[deferred.resolve]: http://api.jquery.com/deferred.resolve/
[deferred.reject]: http://api.jquery.com/deferred.reject/
[.when]: http://api.jquery.com/jQuery.when/
[deferred.then]: http://api.jquery.com/deferred.then/
[deferred.always]: http://api.jquery.com/deferred.always/
[http_www.ruanyifeng.com_blog_2011_08_a_detailed_explanation_of_jquery_deferred_object.html]: http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
[https_blog.csdn.net_weixin_34113237_article_details_88251117]: https://blog.csdn.net/weixin_34113237/article/details/88251117