jQuery技术

jQuery.Deferred对象(2)

字号+ 作者:H5之家 来源:H5之家 2017-02-17 13:01 我要评论( )

这一点需要特别引起注意。 $.ajax( url1, { dataType: "json" } ).then(function( data ) {return $.ajax( url2, { data: { user: data.userId } } );}).done(function( data ) { // 从url2获取的数据}); 上面代码

这一点需要特别引起注意。 

$.ajax( url1, { dataType: "json" } ) .then(function( data ) { return $.ajax( url2, { data: { user: data.userId } } ); }).done(function( data ) { // 从url2获取的数据 });


上面代码最后那个done方法,处理的是从url2获取的数据,而不是从url1获取的数据。

(3)对返回值的修改

利用then()会修改返回值这个特性,我们可以在调用其他回调函数之前,对前一步操作返回的值进行处理。 

var post = $.post("/echo/json/") .then(function(p){ return p.firstName; }); post.done(function(r){ console.log(r); });


上面代码先使用then()方法,从返回的数据中取出所需要的字段(firstName),所以后面的操作就可以只处理这个字段了。

有时,Ajax操作返回json字符串里面有一个error属性,表示发生错误。这个时候,传统的方法只能是通过done()来判断是否发生错误。通过then()方法,可以让deferred对象调用fail()方法。 

var myDeferred = $.post('/echo/json/', {json:JSON.stringify({'error':true})}) .then(function (response) { if (response.error) { return $.Deferred().reject(response); } return response; },function () { return $.Deferred().reject({error:true}); } ); myDeferred.done(function (response) { $("#status").html("Success!"); }).fail(function (response) { $("#status").html("An error occurred"); });


上面代码中,不管是通信出错,或者服务器返回一个错误,都会调用reject方法,返回一个新的deferred对象,状态为rejected,因此就会触发fail方法指定的回调函数。

关于error的处理,jQuery的deferred对象与其他实现Promises规范的函数库有一个重大不同。就是说,如果deferred对象执行过程中,抛出一个非Promises对象的错误,那么将不会被后继的then方法指定的rejected回调函数捕获,而会一直传播到应用程序层面。为了代码行为与Promises规范保持一致,建议出错时,总是使用reject方法返回错误。 

d = $.Deferred() d.then(function(){ throw new Error('err') }).fail(function(){ console.log('fail') }) d.resolve() // Error: err


上面代码中,then的回调函数抛出一个错误,按照Promises规范,应该被fail方法的回调函数捕获,但是jQuery的部署是上升到应用程序的层面。

(4)回调函数的返回值

如果回调函数返回deferred对象,则then方法的返回值将是对应这个返回值的promise对象。 

var d1 = $.Deferred(); var promise = $.when('Hello').then(function(h){ return $.when(h,d1); }) promise.done(function (s1,s2) { console.log(s1); console.log(s2); }) d1.resolve('World') // Hello // World


上面代码中,done方法的回调函数,正常情况下只能接受一个参数。但是由于then方法的回调函数,返回一个when方法生成的deferred对象,导致它可以接受两个参数。

pipe方法

pipe方法接受一个函数作为参数,表示在调用then方法、done方法、fail方法、always方法指定的回调函数之前,先运行pipe方法指定的回调函数。它通常用来对服务器返回的数据做初步处理。

与Promise A+规格的差异

Promise事实上的标准是社区提出的Promise A+规格,jQuery的实现并不完全符合Promise A+,主要是对错误的处理。 

var promise2 = promise1.then(function () { throw new Error("boom!"); });


上面代码在回调函数中抛出一个错误,Promise A+规定此时Promise实例的状态变为reject,该错误被下一个catch方法指定的回调函数捕获。但是,jQuery的Deferred对象此时不会改变状态,亦不会触发回调函数,该错误一般情况下会被window.onerror捕获。换句话说,在Deferred对象中,总是必须使用reject方法来改变状态。

3 promise对象

(1)概念

一般情况下,从外部改变第三方完成的异步操作(比如Ajax)的状态是毫无意义的。为了防止用户这样做,可以在deferred对象的基础上,返回一个针对它的promise对象。

简单说,promise对象就是不能改变状态的deferred对象,也就是deferred的只读版。或者更通俗地理解成,promise是一个对将要完成的任务的承诺,排除了其他人破坏这个承诺的可能性,只能等待承诺方给出结果。

你可以通过promise对象,为原始的deferred对象添加回调函数,查询它的状态,但是无法改变它的状态,也就是说promise对象不允许你调用resolve和reject方法。

(2)生成promise对象

deferred对象的promise方法,用来生成对应的promise对象。 

function getPromise(){ return $.Deferred().promise(); } try{ getPromise().resolve("a"); } catch(err) { console.log(err); } // TypeError


上面代码对promise对象,调用resolve方法,结果报错。

jQuery的ajax() 方法返回的就是一个promise对象。此外,Animation类操作也可以使用promise方法。 

$('body').toggle('blinds').promise().then( function(){ $('body').toggle('blinds') } )


4 辅助方法

deferred对象还有一系列辅助方法,使它更方便使用。

$.when()方法

$.when()接受多个deferred对象作为参数,当它们全部运行成功后,才调用resolved状态的回调函数,但只要其中有一个失败,就调用rejected状态的回调函数。它相当于将多个非同步操作,合并成一个。实质上,when方法为多个deferred对象,返回一个单一的promise对象。 

$.when( $.ajax( "/main.php" ), $.ajax( "/modules.php" ), $.ajax( "/lists.php" ) ).then(successFunc, failureFunc);


上面代码表示,要等到三个ajax操作都结束以后,才执行then方法指定的回调函数。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评