初识 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时有所帮助。