初识 jQuery Deferred

迷途d书童 发布于 2012/04/14 14:25
阅读 4K+
收藏 84

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

$(function() {
  $.get(
    "content.txt",
    function(resp) {
      console.log("first code block");
      console.log(resp);
    }
  );

});

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

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

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

 $.when($.get("content.txt"))
  .then(function(resp) {
    console.log("third code block, then() call");
    console.log(resp);
  })
  .fail(function(resp) {
    console.log(resp);
  });

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

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

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

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

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

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

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

xhrreq.success(function(resp) {
    console.log(resp);
});
xhrreq.error(function(resp) {
  console.log(resp);
});

同样,我们可以声明多个函数去运行:

xhrreq.success(fn1);
xhrreq.success(fn2);

或者,更简单的写法:

xhrreq.success(fn1, fn2);

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

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

 

原文链接OSChina.NET 编译

加载中
0
jeffsui
jeffsui
收藏了,比jquery.ajax多了调试条件。
0
夏夜流星
夏夜流星
确实简化了ajax的编写代码量!
0
empireghost
empireghost
javascript 的  DSL ?
0
高榕
高榕
不错,要好好消化下!
0
大日本国
大日本国
和原ajax差不多
0
高榕
高榕
这样是不是就不是异步了啊。
0
hantsy
hantsy
引入  DSL 概念而已
camelwoo
camelwoo
不懂什么是 dsl,能不能推荐一下 dsl 方面的好文章?
0
柴小红
柴小红
0
W
William

引用来自“高榕”的答案

这样是不是就不是异步了啊。
如果想同步自然就不用引入promise了,引入promise模式就是因为callback太多层,降低阅读性.
返回顶部
顶部