jquery管理ajax異步－deferred對象

今天跟你們分享一個jquery中的對象-deferred。其實早在jquery1.5.0版本中就已經引入這個對象了。不過可能在實際開發過程當中用到的並很少，因此沒有太在乎。

這裏先不說deferred的概念，咱們先看一個例子。

還記得初學的時候，遇到一個實例，先是要ajax請求一個接口（a.json），從返回的數據中得到一個id1值。而後再請求一個接口（b.json）得到id2，最後須要對這兩個id值同時進行操做。

錯誤解法

那個時候初學，首先想到的方案（如今想一想，很傻很天真...）

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);

由於那個時候，尚未理解異步的概念，因此覺得，第二次ajax的時候id已經有值了，可是運行以後才發現，變量id其實根本沒被賦值。想要測試上面代碼，點這裏

也就是這一刻，我真正明白了:ajax是異步的！！！。

傻瓜式解法

發現上面那個方法不能用以後，分析了一下，彈出undefined是由於彈出以前id尚未被賦值，那我保證在彈出以前給id賦值不就解決了嗎？好的，因而我想到了下面這個方法：

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，若是數據不少，訪問速度慢，嵌套更多層，會致使性能降低、影響用戶體驗、代碼很差維護等等問題。因此通常不推薦這種方法。總之，這種寫法讓我難以接受。

因此思來想去，以爲不妥。。。而後那個時候就在一個前端羣裏，詢問各類大牛，直到一個大牛告訴我讓我百度一下deferred，後來認真學習了下，以爲不錯。

使用deferred對象

deferred對象簡介

deferred是jquery中的擴展的一個對象（1.5.0以上的版本支持deferred）。defer的意思是"延遲"，因此deferred對象的含義就是"延遲"到將來某個點再執行。

簡單說，deferred對象就是jQuery的回調函數解決方案。

再簡單說，deferred對象用來管理異步操做，而ajax就是一種異步操做。

deferred基本語法

deferred讓ajax支持新的寫法，代碼以下：

$.ajax({
	url: '/test/json/a.js',
	dataType: 'json',
	type: 'get'
})
.done(function() {
	alert("成功啦！");
})
.fail(function() {
    alert("失敗了...");
})

想要測試上面代碼，點這裏

這個你們應該都知道。如今在編輯器敲入ajax，而後回車，提示的ajax語法結構就是這樣鏈式的寫法。

done函數就是ajax請求成功的回到函數；
fail函數就是ajax請求失敗的回調函數。

使用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函數的參數，對應的是前面每個ajax請求返回的數據

想要測試上面代碼，點這裏

上面的代碼中，用到了deferred對象的when方法。
它的描述是：

提供一種方法來執行一個或多個對象的回調函數。

這裏的ajax1和ajax2就是deferred對象，done和fail就是回調函數。上面代碼的意思是：

只有當兩個ajax請求都成功返回數據時，執行done函數；只要有一個請求不成功，就執行fail函數。

另外值得一提的是：$.when方法的參數，只支持deferred對象，而ajax返回的就是deferred對象。`

這就已經實現了上面的需求了。請求兩個接口，得到兩個數據，都成功時，對這兩個數據同時進行處理。並且這種鏈式寫法，讓讀者一目瞭然，並且便於維護擴展。

deferred方法彙總

提到的方法

• $.Deferred()：生成一個deferred對象。

• $.when() 爲多個操做指定回調函數。

• deferred.done()：指定操做成功後的回調函數

• deferred.fail()：指定操做失敗後的回調函數

未提到的方法

• deferred.resolve()方法和deferred.reject()方法

deferred對象執行回調函數以前會有一個執行狀態的存在，執行狀態一共有三種———未完成、已完成和已失敗。

未完成狀態，則會繼續等待，或者執行progress()指定的回調函數。

已完成狀態，則會執行done()方法指定的回調函數。

已失敗狀態，則會執行fail()方法指定的回調函數。

因此這裏的deferred.resolve()方法就是手動將deferred對象的狀態改成已完成，繼而執行done方法; deferred.reject()方法就是手動將狀態改成已失敗，繼而執行fail方法。

下面來看一個例子：

var defer = $.Deferred(); // 新建一個Deferred對象
　　　　var wait = function(defer){
    　　　　var tasks = function(){
           		defer.resolve();   // 改變Deferred對象爲已完成狀態
    　　　　		alert("執行完畢！");
    　　　　};
    　　　　setTimeout(tasks,5000);
    　　　　return defer;
    　　};
    　  $.when(wait(defer))
    　　.done(function(){
    　　		 alert("succeed"); 
    　　	})
    　　.fail(function(){
    　　 	alert("failed"); 
    　　});

想要測試上面代碼，點這裏

結果：等待5秒鐘，先彈出「succeed」，在彈出「執行完畢！」。

分析一下代碼執行過程：

$.when()裏面的參數是wait函數，也就是一個deferred對象，因此能夠繼續執行setTimeout函數，等待5s，執行tasks函數，而後手動改變了狀態爲「已完成」，因此執行done方法，彈出「succeed」，而後彈出「執行完畢！」。

• deferred.then()：有時爲了省事，能夠把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);

  當then方法只有一個參數時，至關於done方法。當有兩個參數時，第一個至關於done方法，第二個至關於fail方法。

  想要測試上面代碼，點這裏

總結

deferred對象經過對一個ajax請求的各類回調函數的控制，讓jquery寫ajax變的簡單、容易維護、容易擴展。