jQuery通過deferred對(duì)象管理ajax異步

字號(hào):


    這篇文章主要介紹了jQuery通過deferred對(duì)象管理ajax異步的相關(guān)資料,需要的朋友可以參考下
    今天跟大家分享一個(gè)jquery中的對(duì)象-deferred。其實(shí)從jQuery 1.5.0版本開始引入的一個(gè)新功能----deferred對(duì)象。不過可能在實(shí)際開發(fā)過程中用到的并不多,所以沒有太在意。
    什么是deferred對(duì)象?
    開發(fā)網(wǎng)站的過程中,我們經(jīng)常遇到某些耗時(shí)很長(zhǎng)的javascript操作。其中,既有異步的操作(比如ajax讀取服務(wù)器數(shù)據(jù)),也有同步的操作(比如遍歷一個(gè)大型數(shù)組),它們都不是立即能得到結(jié)果的。
    通常的做法是,為它們指定回調(diào)函數(shù)(callback)。即事先規(guī)定,一旦它們運(yùn)行結(jié)束,應(yīng)該調(diào)用哪些函數(shù)。
    但是,在回調(diào)函數(shù)方面,jQuery的功能非常弱。為了改變這一點(diǎn),jQuery開發(fā)團(tuán)隊(duì)就設(shè)計(jì)了deferred對(duì)象。
    簡(jiǎn)單說,deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案。在英語中,defer的意思是"延遲",所以deferred對(duì)象的含義就是"延遲"到未來某個(gè)點(diǎn)再執(zhí)行。
    這里先不說deferred的概念,我們先看一個(gè)例子。
    還記得初學(xué)的時(shí)候,遇到一個(gè)實(shí)例,先是要ajax請(qǐng)求一個(gè)接口(a.json),從返回的數(shù)據(jù)中獲得一個(gè)id1值。然后再請(qǐng)求一個(gè)接口(b.json)獲得id2,最后需要對(duì)這兩個(gè)id值同時(shí)進(jìn)行操作。
    錯(cuò)誤解法
    那個(gè)時(shí)候初學(xué),首先想到的方案(現(xiàn)在想想,很傻很天真...)
    var id1, id2;
    $.ajax({
    url: 'a.js',
    dataType: 'json',
    type: 'get',
    success: function(d){
    id1 = d.item.id;
    }
    });
    $.ajax({
    url: 'b.js',
    dataType: 'json',
    type: 'get',
    success: function(d){
    id2 = d.item.id;
    }
    })
    alert('id1='+id1+','+ 'id2='+ id2);
    因?yàn)槟莻€(gè)時(shí)候,還沒有理解異步的概念,所以以為,第二次ajax的時(shí)候id已經(jīng)有值了,但是運(yùn)行之后才發(fā)現(xiàn),變量id其實(shí)根本沒被賦值。想要測(cè)試上面代碼,點(diǎn)這里也就是這一刻,我真正明白了:ajax是異步的?。?!。
    傻瓜式解法
    發(fā)現(xiàn)上面那個(gè)方法不能用之后,分析了一下,彈出undefined是因?yàn)閺棾鲋癷d還沒有被賦值,那我保證在彈出之前給id賦值不就解決了嗎?好的,于是我想到了下面這個(gè)方法:
    var id1;
    $.ajax({
    url: '/test/json/a.js',
    dataType: 'json',
    type: 'get',
    success: function(d){
    id1 = d.item.id;
    $.ajax({
    url: '/test/json/b.js',
    dataType: 'json',
    type: 'get',
    success: function(f){
    id2 = f.item.id;
    alert('id1='+id1+','+ 'id2='+ id2);
    }
    });
    }
    })
    邏輯雖然正確了,但總覺得怪怪的,如果這里需要嵌套3層呢?4層呢?。。。ajax里面嵌套ajax,如果數(shù)據(jù)很多,訪問速度慢,嵌套更多層,會(huì)導(dǎo)致性能下降、影響用戶體驗(yàn)、代碼不好維護(hù)等等問題。所以一般不推薦這種方法。總之,這種寫法讓我難以接受。
    所以思來想去,覺得不妥。。。然后那個(gè)時(shí)候就在一個(gè)前端群里,詢問各種大牛,直到一個(gè)大牛告訴我讓我百度一下deferred,后來認(rèn)真學(xué)習(xí)了下,覺得不錯(cuò)。
    使用deferred對(duì)象
    deferred對(duì)象簡(jiǎn)介
    deferred是jquery中的擴(kuò)展的一個(gè)對(duì)象(1.5.0以上的版本支持deferred)。defer的意思是"延遲",所以deferred對(duì)象的含義就是"延遲"到未來某個(gè)點(diǎn)再執(zhí)行。
    簡(jiǎn)單說,deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案。
    再簡(jiǎn)單說,deferred對(duì)象用來管理異步操作,而ajax就是一種異步操作。
    deferred基本語法
    deferred讓ajax支持新的寫法,代碼如下:
    $.ajax({
    url: '/test/json/a.js',
    dataType: 'json',
    type: 'get'
    })
    .done(function() {
    alert("成功啦!");
    })
    .fail(function() {
    alert("失敗了...");
    })
    這個(gè)大家應(yīng)該都知道。現(xiàn)在在編輯器敲入ajax,然后回車,提示的ajax語法結(jié)構(gòu)就是這樣鏈?zhǔn)降膶懛ā?BR>    done函數(shù)就是ajax請(qǐng)求成功的回到函數(shù);
    fail函數(shù)就是ajax請(qǐng)求失敗的回調(diào)函數(shù)。
    使用deferred的解決方法
    var ajax1 = $.ajax({
    url: '/test/json/a.js',
    dataType: 'json',
    type: 'get'
    });
    var ajax2 = $.ajax({
    url: '/test/json/b.js',
    dataType: 'json',
    type: 'get',
    });
    $.when(ajax1,ajax2).done(function(d1,d2){
    var id1 = d1[0].item.id;
    var id2 = d2[0].item.id;
    alert('id1='+id1+', '+ 'id2='+ id2);
    }).fail(function(){
    alert('error');
    });
    值得一提的是,上面代碼中done函數(shù)的參數(shù),對(duì)應(yīng)的是前面每一個(gè)ajax請(qǐng)求返回的數(shù)據(jù)上面的代碼中,用到了deferred對(duì)象的when方法。
    它的描述是:
    提供一種方法來執(zhí)行一個(gè)或多個(gè)對(duì)象的回調(diào)函數(shù)。
    這里的ajax1和ajax2就是deferred對(duì)象,done和fail就是回調(diào)函數(shù)。上面代碼的意思是:
    只有當(dāng)兩個(gè)ajax請(qǐng)求都成功返回?cái)?shù)據(jù)時(shí),執(zhí)行done函數(shù);只要有一個(gè)請(qǐng)求不成功,就執(zhí)行fail函數(shù)。
    另外值得一提的是:$.when方法的參數(shù),只支持deferred對(duì)象,而ajax返回的就是deferred對(duì)象。`
    這就已經(jīng)實(shí)現(xiàn)了上面的需求了。請(qǐng)求兩個(gè)接口,獲得兩個(gè)數(shù)據(jù),都成功時(shí),對(duì)這兩個(gè)數(shù)據(jù)同時(shí)進(jìn)行處理。而且這種鏈?zhǔn)綄懛?,讓讀者一目了然,而且便于維護(hù)擴(kuò)展。
    deferred方法匯總
    提到的方法
    $.Deferred():生成一個(gè)deferred對(duì)象。
    $.when() 為多個(gè)操作指定回調(diào)函數(shù)。
    deferred.done():指定操作成功后的回調(diào)函數(shù)
    deferred.fail():指定操作失敗后的回調(diào)函數(shù)
    未提到的方法
    •deferred.resolve()方法和deferred.reject()方法
    deferred對(duì)象執(zhí)行回調(diào)函數(shù)之前會(huì)有一個(gè)執(zhí)行狀態(tài)的存在,執(zhí)行狀態(tài)一共有三種———未完成、已完成和已失敗。
    未完成狀態(tài),則會(huì)繼續(xù)等待,或者執(zhí)行progress()指定的回調(diào)函數(shù)。
    已完成狀態(tài),則會(huì)執(zhí)行done()方法指定的回調(diào)函數(shù)。
    已失敗狀態(tài),則會(huì)執(zhí)行fail()方法指定的回調(diào)函數(shù)。
    所以這里的deferred.resolve()方法就是手動(dòng)將deferred對(duì)象的狀態(tài)改為已完成,繼而執(zhí)行done方法; deferred.reject()方法就是手動(dòng)將狀態(tài)改為已失敗,繼而執(zhí)行fail方法。
    下面來看一個(gè)例子:
    var defer = $.Deferred(); // 新建一個(gè)Deferred對(duì)象
     var wait = function(defer){
     var tasks = function(){
    defer.resolve(); // 改變Deferred對(duì)象為已完成狀態(tài)
      alert("執(zhí)行完畢!");
     };
     setTimeout(tasks,5000);
     return defer;
    };
    $.when(wait(defer))
    .done(function(){
    alert("succeed");
    })
    .fail(function(){
    alert("failed");
    });
    結(jié)果:等待5秒鐘,先彈出“succeed”,在彈出“執(zhí)行完畢!”。
    分析一下代碼執(zhí)行過程:
    $.when()里面的參數(shù)是wait函數(shù),也就是一個(gè)deferred對(duì)象,所以可以繼續(xù)執(zhí)行setTimeout函數(shù),等待5s,執(zhí)行tasks函數(shù),然后手動(dòng)改變了狀態(tài)為“已完成”,所以執(zhí)行done方法,彈出“succeed”,然后彈出“執(zhí)行完畢!”。
    deferred.then():有時(shí)為了省事,可以把done()和fail()合在一起寫,這就是then()方法。
    function successFun(){
    alert("yes");
    }
    function failFun(){
    alert('fail');
    }
    $.when($.ajax({
    url: '/test/json/a.js',
    dataType:'json',
    type: 'get'
    }))
    .then(successFun, failFun);
    當(dāng)then方法只有一個(gè)參數(shù)時(shí),相當(dāng)于done方法。當(dāng)有兩個(gè)參數(shù)時(shí),第一個(gè)相當(dāng)于done方法,第二個(gè)相當(dāng)于fail方法。
    總結(jié):
    deferred對(duì)象通過對(duì)一個(gè)ajax請(qǐng)求的各種回調(diào)函數(shù)的控制,讓jquery寫ajax變的簡(jiǎn)單、容易維護(hù)、容易擴(kuò)展。
    以上所述是小編給大家介紹的jQuery通過deferred對(duì)象管理ajax異步的相關(guān)知識(shí),希望對(duì)大家有所幫助