初识 jQuery Deferred

初识 jQuery Deferred

jQuery 1.5之前，Ajax请求可能有点麻烦。写一个简单get请求，你可能会写成：

 

01	$(function() {

02

$.get(

03	"content.txt",

04	function(resp) {

05	console.log("first code block");

06	console.log(resp);

07

}

08

);

09

10

});

但这种写法存在一个问题：如果你不定义一个函数来运行此代码，执行失败后会发生什么？在这个问题得到答案之前，我们还是先下载jQuery Deferred。本文将告诉你为什么Deferred非常有用。(以下代码依赖于jQuery1.5或更高版本)

jQuery 1.5以后，在调用jQuery的Ajax时会返回jQuery Deferred对象。文档里面说的不是很清楚，但简单地说，调用Ajax返回了一个jQuery对象，它包含了promise：promise()方法会返回一个动态生成Promise。

在现实工作中，我们使用基本的Ajax调用，不需要关心它的内部运作，只需要关心调用成功或 失败后的处理。我们继续以上面的GET请求为例， 讲解jQuery Deferred的when()、then()和fail()方法：

 

1	$.when($.get("content.txt"))

2	.then(function(resp) {

3	console.log("third code block, then() call");

4	console.log(resp);

5

})

6	.fail(function(resp) {

7	console.log(resp);

8

});

我们可以将上面代码理解为：

 

1	$.when(some ajax request).then(do this if it succeeds).fail(or do this if it fails)

它的主要特点是 $.when()里面可以写多个函数，一旦这些函数执行完成，才会调用.then()：

 

1	$.when(fn1(), fn2()).then().fail()

你可能没有注意到这种方法的优势所在，我们可以通过下面代码进行比较。
首先，通过$.get()得到一个变量：

 

1	var xhrreq = $.get("content.txt");

然后，我们可以给这个变量定义.success和.error方法：

 

1	xhrreq.success(function(resp) {

2	console.log(resp);

3

});

4	xhrreq.error(function(resp) {

5	console.log(resp);

6

});

同样，我们可以声明多个函数去运行：

 

1	xhrreq.success(fn1);

2	xhrreq.success(fn2);

或者，更简单的写法：

 

1	xhrreq.success(fn1, fn2);

通过以上代码对比，得出结论：jQuery Deferred的when()、then()、fail()方法能够直接绑定Ajax调用后的事件；而且写法简洁，逻辑清晰。

最后，希望jQuery Deferred能在你调用jQuery Ajax时有所帮助。