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时有所帮助。
分享到:
相关推荐
本文实例讲述了javascript异步处理与Jquery deferred对象用法。分享给大家供大家参考,具体如下: 这是项目组老大整理的一些关于jquery 异步处理请求,以及使用 jquery deferred 对象的一些常见方法。虽然是项目上...
Deferred.JS 是JQuery Deferred objects的替代品。 (行为与 JQuery Deferred 相同)。 阅读以了解为什么您应该从 JQuery Deferred 迁移到 Deferred.JS。 要从 JQuery Deferred 迁移到 Deferred.JS,请参阅 。 ...
jquery Deferred 快速解决异步回调的问题 function ok(name){ var dfd = new $.Deferred(); callback:func(){ return dfd.resolve( response ); } return dfd.promise(); } $.when(ok(1),ok(2)).then(function...
主要介绍了jQuery通过deferred对象管理ajax异步的相关资料,需要的朋友可以参考下
主要介绍了谈谈jQuery之Deferred源码剖析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的回调函数。同时,还改写了ajax方法,现在的ajax方法返回的是一个deferred对象。 那就来看看deferred对象的用法。 1...
一个Deferred.Promise对象可以理解为是deferred对象的一个视图,它只包含deferred对象的一组方法,包括:done(),then(),fail(),isResolved(), isRejected(), always(),这些方法只能观察一个deferred的状态,而无法...
React式承诺使 jQuery.Deferred 承诺具有React性。关于Reactive-Promise 允许您使用承诺作为React数据源。 常见用例包括: 允许 Iron Router 路由等待一个或多个异步任务基于异步任务完成在模板中执行条件渲染使用...
主要介绍了jQuery之Deferred对象详解,本文深入剖析了jQuery Deferred对象的方法属性等内容,需要的朋友可以参考下
前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery...
deferred对象的延迟功能对jQuery的ajax操作是一个很大的帮助,尤其是回调控制,下面我们就来看一下对jQuery中借助deferred来请求及判断AJAX加载的实例讲解
功能:一旦调用print函数就解析的jQuery.Deferred对象。可用于设置回调 - 请参阅wiki 超时 默认: 750 可接受的值:以毫秒为单位的时间 setTimeout 功能:在创建新窗口/ iframe之前更改等待内容等加载内容的最大时间...
与jQuery的Deferred类似,但这是一个Promise包装器。 使用情况 var Deferred = require ( '@lenic/deferred' ) ; const deferred = Deferred ( ) ; deferred . promise . then ( v => console . log ( v ) , e => ...
jquery基础教程之deferred对象使用方法
(请注意,这可能不适用于跨浏览器,请参阅: ://api.jquery.com/load-event/)安装手动或使用凉亭下载: $ bower install jquery-deferred-images示例用法 $ ( 'img' ) . deferredImages ( { done : function ( ) ...
jQuery.Deferred对象功能扩展。 新的jQuery.isNumeric()方法。 另外,在jQuery 1.7中移除了event.layerX和event.layerY这两个属性,以及jQuery.isNaN()和jQuery.event.proxy()方法,分别用event.originalEvent....
jQuery is a feature-rich ... Efficiently orchestrate asynchronous procedures using jQuery Deferred and Promises Utilize the most widely-used client-side templating libraries for more complex use cases