使用 jQuery Deferred 和 Promise 创建响应式应用程序

最新推荐文章于 2024-11-12 10:54:49 发布

我爱丁丁猫

最新推荐文章于 2024-11-12 10:54:49 发布

阅读量193

点赞数

分类专栏：前端文章标签： javascript 前端文摘 jquery deferred promise

原文链接：https://www.mk2048.com/blog/blog.php?id=haj2iib01c1j&title=%E4%BD%BF%E7%94%A8+jQuery+Deferred+%E5%92%8C+Promise+%E5%88%9B%E5%BB%BA%E5%93%8D%E5%BA%94%E5%BC%8F%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

　　这篇文章，我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念，它们是 JavaScript 工具包（如Dojo和MochiKit）中非常重要的一个功能，最近也首次亮相于流行的 JavaScript 库 jQuery（已经是1.5版本的事情了）。 Deferred 提供了一个抽象的非阻塞的解决方案（如 Ajax 请求的响应），它创建一个 “promise” 对象，其目的是在未来某个时间点返回一个响应。如果您之前没有接触过 “promise”，我们将会在下面做详细介绍。

您可能感兴趣的相关文章

　　抽象来说，deferreds 可以理解为表示需要长时间才能完成的耗时操作的一种方式，相比于阻塞式函数它们是异步的，而不是阻塞应用程序等待其完成然后返回结果。deferred对象会立即返回，然后你可以把回调函数绑定到deferred对象上，它们会在异步处理完成后被调用。

Promise

　　你可能已经阅读过一些关于promise和deferreds实现细节的资料。在本章节中，我们大致介绍下promise如何工作，这些在几乎所有的支持deferreds的javascript框架中都是适用的。

　　一般情况下，promise作为一个模型，提供了一个在软件工程中描述延时（或将来）概念的解决方案。它背后的思想我们已经介绍过：不是执行一个方法然后阻塞应用程序等待结果返回，而是返回一个promise对象来满足未来值。

　　举一个例子会有助于理解，假设你正在建设一个web应用程序，它很大程度上依赖第三方api的数据。那么就会面临一个共同的问题：我们无法获悉一个API响应的延迟时间，应用程序的其他部分可能会被阻塞，直到它返回结果。Deferreds 对这个问题提供了一个更好的解决方案，它是非阻塞的，并且与代码完全解耦。

　　Promise/A提议’定义了一个’then‘方法来注册回调，当处理函数返回结果时回调会执行。它返回一个promise的伪代码看起来是这样的：

promise = callToAPI( arg1, arg2, ...);
promise.then(function( futureValue ) {
/* handle futureValue */
});
promise.then(function( futureValue ) {
/* do something else */
});

　　此外，promise回调会在处于以下两种不同的状态下执行：

resolved：在这种情况下，数据是可用
rejected：在这种情况下，出现了错误，没有可用的值

　　幸运的是，'then'方法接受两个参数：一个用于promise得到了解决（resolved），另一个用于promise拒绝（rejected）。让我们回到伪代码：

promise.then( function( futureValue ) {
/* we got a value */
} , function() {
/* something went wrong */
} );

　　在某些情况下，我们需要获得多个返回结果后，再继续执行应用程序（例如，在用户可以选择他们感兴趣的选项前，显示一组动态的选项）。这种情况下，'when'方法可以用来解决所有的promise都满足后才能继续执行的场景。

when(
promise1,
promise2,
...
).then(function( futureValue1, futureValue2, ... ) {
/* all promises have completed and are resolved */
});

　　一个很好的例子是这样一个场景，你可能同时有多个正在运行的动画。如果不跟踪每个动画执行完成后的回调，很难做到在动画完成后执行下一步任务。然而使用promise和‘when’方式却可以很直截了当的表示：一旦动画执行完成，就可以执行下一步任务。最终的结果是我们可以可以简单的用一个回调来解决多个动画执行结果的等待问题。例如：

when( function(){
/* animation 1 */
/* return promise 1 */
}, function(){
/* animation 2 */
/* return promise 2 */
} ).then(function(){
/* once both animations have completed we can then run our additional logic */
});

　　这意味着，基本上可以用非阻塞的逻辑方式编写代码并异步执行。而不是直接将回调传递给函数，这可能会导致紧耦合的接口，通过promise模式可以很容易区分同步和异步的概念。

　　在下一节中，我们将着眼于jQuery实现的deferreds，你可能会发现它明显比现在所看到的promise模式要简单。

jQuery的Deferreds

　　jQuery在1.5版本中首次引入了deferreds。它所实现的方法与我们之前描述的抽象的概念没有大的差别。原则上，你获得了在未来某个时候得到‘延时’返回值的能力。在此之前是无法单独使用的。 Deferreds 作为对ajax模块较大重写的一部分添加进来，它遵循了CommonJS的promise/ A设计。1.5和先前的版本包含deferred功能，可以使$.ajax() 接收调用完成及请求出错的回调，但却存在严重的耦合。开发人员通常会使用其他库或工具包来处理延迟任务。新版本的jQuery提供了一些增强的方式来管理回调，提供更加灵活的方式建立回调，而不用关心原始的回调是否已经触发。同时值得注意的是，jQuery的递延对象支持多个回调绑定多个任务，任务本身可以既可以是同步也可以是异步的。

　　您可以浏览下表中的递延功能，有助于了解哪些功能是你需要的：

jQuery.Deferred（）	创建一个新的Deferred对象的构造函数，可以带一个可选的函数参数，它会在构造完成后被调用。
jQuery.when（）	通过该方式来执行基于一个或多个表示异步任务的对象上的回调函数
jQuery.ajax（）	执行异步Ajax请求，返回实现了promise接口的jqXHR对象
deferred.then（resolveCallback，rejectCallback）	添加处理程序被调用时，递延对象得到解决或者拒绝的回调。
deferred.done（）	当延迟成功时调用一个函数或者数组函数.
deferred.fail（）	当延迟失败时调用一个函数或者数组函数.。
deferred.resolve（ARG1，ARG2，...）	调用Deferred对象注册的‘done’回调函数并传递参数
deferred.resolveWith（context，args）	调用Deferred对象注册的‘done’回调函数并传递参数和设置回调上下文
deferred.isResolved	确定一个Deferred对象是否已经解决。
deferred.reject（arg1，arg2，...）	调用Deferred对象注册的‘fail’回调函数并传递参数
deferred.rejectWith（context，args）	调用Deferred对象注册的‘fail’回调函数并传递参数和设置回调上下文
deferred.promise（）	返回promise对象，这是一个伪造的deferred对象：它基于deferred并且不能改变状态所以可以被安全的传递

　　jQuery延时实现的核心是jQuery.Deferred：一个可以链式调用的构造函数。...... 需要注意的是任何deferred对象的默认状态是unresolved，回调会通过 .then() 或 .fail()方法添加到队列，并在稍后的过程中被执行。

　　下面这个$.when() 接受多个参数的例子

function successFunc(){ console.log( “success!” ); }
function failureFunc(){ console.log( “failure!” ); }
$.when(
$.ajax( "/main.php" ),
$.ajax( "/modules.php" ),
$.ajax( “/lists.php” )
).then( successFunc, failureFunc );

　　在$.when() 的实现中有趣的是，它并非仅能解析deferred对象，还可以传递不是deferred对象的参数，在处理的时候会把它们当做deferred对象并立即执行回调（doneCallbacks）。这也是jQuery的Deferred实现中值得一提的地方，此外，deferred.then（）还为deferred.done和 deferred.fail（）方法在deferred的队列中增加回调提供支持。

　　利用前面介绍的表中提到的deferred功能，我们来看一个代码示例。在这里，我们创建一个非常基本的应用程序：通过$.get方法（返回一个promise）获取一条外部新闻源（1）并且（2）获取最新的一条回复。同时程序还通过函数（prepareInterface（））实现新闻和回复内容显示容器的动画。

　　为了确保在执行其他相关行为前，上面的这三个步骤确保完成，我们使用$.when()。根据您的需要 .then()和.fail() 处理函数可以被用来执行其他程序逻辑。

function getLatestNews() {
return $.get( “latestNews.php”, function(data){
console.log( “news data received” );
$( “.news” ).html(data);
} );
}
function getLatestReactions() {
return $.get( “latestReactions.php”, function(data){
console.log( “reactions data received” );
$( “.reactions” ).html(data);
} );
}
function prepareInterface() {
return $.Deferred(function( dfd ) {
var latest = $( “.news, .reactions” );
latest.slideDown( 500, dfd.resolve );
latest.addClass( “active” );
}).promise();
}
$.when(
getLatestNews(), getLatestReactions(), prepareInterface()
).then(function(){
console.log( “fire after requests succeed” );
}).fail(function(){
console.log( “something went wrong!” );
});

　　deferreds在ajax的幕后操作中使用并不意味着它们无法在别处使用。在本节中，我们将看到在一些解决方案中，使用deferreds将有助于抽象掉异步的行为，并解耦我们的代码。

异步缓存

　　当涉及到异步任务，缓存可以是一个有点苛刻的，因为你必须确保对于同一个key任务仅执行一次。因此，代码需要以某种方式跟踪入站任务。例如下面的代码片段：

$.cachedGetScript( url, callback1 );
$.cachedGetScript( url, callback2 );

　　缓存机制需要确保脚本不管是否已经存在于缓存，只能被请求一次。因此，为了缓存系统可以正确地处理请求,我们最终需要写出一些逻辑来跟踪绑定到给定url上的回调。

　　值得庆幸的是，这恰好是deferred所实现的那种逻辑，因此我们可以这样来做：

var cachedScriptPromises = {};
$.cachedGetScript = function( url, callback ) {
if ( !cachedScriptPromises[ url ] ) {
cachedScriptPromises[ url ] = $.Deferred(function( defer ) {
$.getScript( url ).then( defer.resolve, defer.reject );
}).promise();
}
return cachedScriptPromises[ url ].done( callback );
};

　　代码相当简单：我们为每一个url缓存一个promise对象。如果给定的url没有promise，我们创建一个deferred，并发出请求。如果它已经存在我们只需要为它绑定回调。该解决方案的一大优势是，它会透明地处理新的和缓存过的请求。另一个优点是一个基于deferred的缓存会优雅地处理失败情况。当promise以‘rejected’状态结束的话，我们可以提供一个错误回调来测试：

　　$.cachedGetScript( url ).then( successCallback, errorCallback );

　　请记住：无论请求是否缓存过，上面的代码段都会正常运作！

通用异步缓存

　　为了使代码尽可能的通用，我们建立一个缓存工厂并抽象出实际需要执行的任务：

$.createCache = function( requestFunction ) {
var cache = {};
return function( key, callback ) {
if ( !cache[ key ] ) {
cache[ key ] = $.Deferred(function( defer ) {
requestFunction( defer, key );
}).promise();
}
return cache[ key ].done( callback );
};
}

　　现在具体的请求逻辑已经抽象出来，我们可以重新写cachedGetScript：

$.cachedGetScript = $.createCache(function( defer, url ) {
$.getScript( url ).then( defer.resolve, defer.reject );
});

每次调用createCache将创建一个新的缓存库，并返回一个新的高速缓存检索函数。现在，我们拥有了一个通用的缓存工厂，它很容易实现涉及从缓存中取值的逻辑场景。

图片加载

　　另一个候选场景是图像加载：确保我们不加载同一个图像两次，我们可能需要加载图像。使用createCache很容易实现：

$.loadImage = $.createCache(function( defer, url ) {
var image = new Image();
function cleanUp() {
image.onload = image.onerror = null;
}
defer.then( cleanUp, cleanUp );
image.onload = function() {
defer.resolve( url );
};
image.onerror = defer.reject;
image.src = url;
});

　　接下来的代码片段如下：

$.loadImage( "my-image.png" ).done( callback1 );
$.loadImage( "my-image.png" ).done( callback2 );

　　无论image.png是否已经被加载，或者正在加载过程中，缓存都会正常工作。

缓存数据的API响应

　　哪些你的页面的生命周期过程中被认为是不可变的API请求，也是缓存完美的候选场景。比如，执行以下操作：

$.searchTwitter = $.createCache(function( defer, query ) {
$.ajax({
url: "http://search.twitter.com/search.json",
data: { q: query },
dataType: "jsonp",
success: defer.resolve,
error: defer.reject
});
});

　　程序允许你在Twitter上进行搜索，同时缓存它们：

$.searchTwitter( "jQuery Deferred", callback1 );
$.searchTwitter( "jQuery Deferred", callback2 );

定时

　　基于deferred的缓存并不限定于网络请求;它也可以被用于定时目的。

　　例如，您可能需要在网页上给定一段时间后执行一个动作，来吸引用户对某个不容易引起注意的特定功能的关注或处理一个延时问题。虽然setTimeout适合大多数用例，但在计时器出发后甚至理论上过期后就无法提供解决办法。我们可以使用以下的缓存系统来处理：

var readyTime;
$(function() { readyTime = jQuery.now(); });
$.afterDOMReady = $.createCache(function( defer, delay ) {
delay = delay || 0;
$(function() {
var delta = $.now() - readyTime;
if ( delta >= delay ) { defer.resolve(); }
else {
setTimeout( defer.resolve, delay - delta );
}
});
});

　　新的afterDOMReady辅助方法用最少的计数器提供了domReady后的适当时机。如果延迟已经过期，回调会被马上执行。

同步多个动画

　　动画是另一个常见的异步任务范例。然而在几个不相关的动画完成后执行代码仍然有点挑战性。尽管在jQuery1.6中才提供了在动画元素上取得promise对象的功能，但它是很容易的手动实现：

$.fn.animatePromise = function( prop, speed, easing, callback ) {
var elements = this;
return $.Deferred(function( defer ) {
elements.animate( prop, speed, easing, function() {
defer.resolve();
if ( callback ) {
callback.apply( this, arguments );
}
});
}).promise();
};

　　然后，我们可以使用$.when()同步化不同的动画：

var fadeDiv1Out = $( "#div1" ).animatePromise({ opacity: 0 }),
fadeDiv2In = $( "#div1" ).animatePromise({ opacity: 1 }, "fast" );
$.when( fadeDiv1Out, fadeDiv2In ).done(function() {
/* both animations ended */
});

　　我们也可以使用同样的技巧，建立了一些辅助方法：

$.each([ "slideDown", "slideUp", "slideToggle", "fadeIn", "fadeOut", "fadeToggle" ],
function( _, name ) {
$.fn[ name "Promise" ] = function( speed, easing, callback ) {
var elements = this;
return $.Deferred(function( defer ) {
elements[ name ]( speed, easing, function() {
defer.resolve();
if ( callback ) {
callback.apply( this, arguments );
}
});
}).promise();
};
});