JavaScript中then的作用

總的來說有一個(gè)功能，用Angular JS的post方法向后臺(tái)發(fā)送請(qǐng)求，然后后臺(tái)返回一段數(shù)據(jù)交個(gè)Angular 來進(jìn)行處理，先看看service部分：

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、洛江網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為洛江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

[javascript]?view plain?copy

fs.services.factory('MonitorService',?['$http',?'$q',?function?($http,?$q)?{

return?{

queryByYearOrMonth:?function?(postData)?{

var?delay?=?$q.defer();

$http.post(fs.common.baseResourceURL2?+?'/api/monitor/uploadQuantity',?postData,{})

.success(function?(data)?{

delay.resolve(data);

}).error(function?()?{

delay.reject("Can't?search?uploadQuantity?data.");

});

return?delay.promise;

}

}

}]);

如果不經(jīng)過深入測(cè)試的話，第一反應(yīng)是覺得 delay.resolve(data)這句在處理數(shù)據(jù)，把數(shù)據(jù)放在delay對(duì)象的promise中，因?yàn)樽詈笠痪涫莚eturn delay.promise，想當(dāng)然地認(rèn)為

delay.promise就是已經(jīng)處理好的可以交給controller使用的數(shù)據(jù)，但經(jīng)過實(shí)際測(cè)試，發(fā)現(xiàn)不是這么回事。

那就來看看delay.promise到底是什么？在瀏覽器控制臺(tái)中，以此輸出delay.promise中的屬性和值，如下：

[javascript]?view plain?copy

then:?function?(callback,?errback)?{

var?result?=?defer();

var?wrappedCallback?=?function(value)?{

try?{

result.resolve((callback?||?defaultCallback)(value));

}?catch(e)?{

exceptionHandler(e);

result.reject(e);

}

};

var?wrappedErrback?=?function(reason)?{

try?{

result.resolve((errback?||?defaultErrback)(reason));

}?catch(e)?{

exceptionHandler(e);

result.reject(e);

}

};

if?(pending)?{

pending.push([wrappedCallback,?wrappedErrback]);

}?else?{

value.then(wrappedCallback,?wrappedErrback);

}

return?result.promise;

}

always:?function?(callback)?{

function?makePromise(value,?resolved)?{

var?result?=?defer();

if?(resolved)?{

result.resolve(value);

}?else?{

result.reject(value);

}

return?result.promise;

}

function?handleCallback(value,?isResolved)?{

var?callbackOutput?=?null;

try?{

callbackOutput?=?(callback?||defaultCallback)();

}?catch(e)?{

return?makePromise(e,?false);

}

if?(callbackOutput??callbackOutput.then)?{

return?callbackOutput.then(function()?{

return?makePromise(value,?isResolved);

},?function(error)?{

return?makePromise(error,?false);

});

}?else?{

return?makePromise(value,?isResolved);

}

}

return?this.then(function(value)?{

return?handleCallback(value,?true);

},?function(error)?{

return?handleCallback(error,?false);

});

}

有兩個(gè)部分，then 和 always，兩個(gè)都是可執(zhí)行的方法。

always 這里不作討論。來看看then ，它有兩個(gè)參數(shù)，callback 和 errback， 第一個(gè)用來處理“resolved”和“success”事件；第二個(gè)用來處理“rejected”和“failure”事件。

所以，delay.promise不是現(xiàn)成的數(shù)據(jù)，還不能直接使用。然后來看看這個(gè)then怎么使用（主要是如何從中提取出我們需要的后臺(tái)返回的數(shù)據(jù)）：

[javascript]?view plain?copy

uploadQuantityLoader(params).then(function(Cquantity){

$scope.quantityMap?=?Cquantity.quantityMap;

makeGraph();

});

then(fn) 方法中帶一個(gè)參數(shù)，這個(gè)參數(shù)就是要被執(zhí)行的函數(shù)，并且，這個(gè)作為參數(shù)的函數(shù)本身有一個(gè)參數(shù)，這個(gè)參數(shù)就是我們需要的數(shù)據(jù)，這里是關(guān)鍵，本例中也就是

Cquantity，然后這個(gè)Cquantity就可以放在函數(shù)里面進(jìn)行處理了。

怎么使用jquery的then方法

使用jquery的then方法

1.Deferred.then()相當(dāng)于Deferred.done()、Deferred.fail()、Deferred.progress()的合體，可以同時(shí)注冊(cè)3個(gè)狀態(tài)下的回調(diào)函數(shù)。

[javascript]?view plain?copy

function?success(data)

{

alert("success?data?=?"?+?data);

}

function?fail(data)

{

alert("fail?data?=?"?+?data);

}

function?progress(data)

{

alert("progress?data?=?"?+?data);

}

var?deferred?=?$.Deferred();

//?一起注冊(cè)回調(diào)

deferred.then(success,?fail,?progress);

//?分別注冊(cè)回調(diào)

deferred.done(success);

deferred.fail(fail);

deferred.progress(progress);

deferred.notify("10%");

deferred.resolve("ok");

當(dāng)然我們也可以像done()一樣，多次調(diào)用then()注冊(cè)回調(diào)函數(shù)。then()雖然可以這么使用，但是實(shí)際開發(fā)中一般不這么用，因?yàn)闆]有啥必要。JQuery1.8之前，這就是then()方法的作用。

2.Deferred.then()解決多個(gè)異步操作之間有依賴的問題，這才是then()真正有意義的場(chǎng)景。JQuery1.8之后，then()取代了過時(shí)的pipe()方法。這種場(chǎng)景下，我們需要使用Deferred.then()返回的新Promise對(duì)象。上面的第一種使用方式，我們忽略了Deferred.then()的返回值。

[javascript]?view plain?copy

var?deferred?=?$.Deferred();

//?使用then()注冊(cè)一個(gè)resolved狀態(tài)的回調(diào)函數(shù),并返回一個(gè)過濾后的promise

//?返回的filtered已經(jīng)不是原來的Deferred或者Promise對(duì)象了

var?filtered?=?deferred.then(function(?value?)?{

alert("trigger?Deferred?filter.value="+value);//5

return?value?*?2;

});

//?用過濾后的Promise再次注冊(cè)回調(diào)函數(shù)

filtered.done(function(?value?)?{

alert("filtered?value="?+?value);//10

});

deferred.resolve(?5?);

我們用deferred.then()注冊(cè)了一個(gè)完成狀態(tài)下的回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)得到的值是5；之后用filtered這個(gè)新的Promise注冊(cè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)中得到的值是10(第一個(gè)回調(diào)函數(shù)的返回結(jié)果)。現(xiàn)在我們看下JQuery官方對(duì)then的解釋:

These filter functions can return a new value to be passed along to the promise's .done() or .fail() callbacks, or they can return another observable object (Deferred, Promise, etc) which will pass its resolved / rejected status and values to the promise's callbacks. If the filter function used is null, or not specified, the promise will be resolved or rejected with the same values as the original.

我們知道deferred.resolve()、deferred.reject()、deferred.notify()可以指定參數(shù)值，這個(gè)參數(shù)會(huì)傳遞給相應(yīng)狀態(tài)下的回調(diào)函數(shù)。如果我們使用的是done()、fail()、progress()注冊(cè)的回調(diào)函數(shù)，那么某個(gè)狀態(tài)下的所有回調(diào)函數(shù)得到的都是相同參數(shù)。但是如果我們使用了then()注冊(cè)回調(diào)函數(shù)，那么第一回調(diào)函數(shù)的返回值將作為第二個(gè)回調(diào)函數(shù)的參數(shù)，同樣的第二個(gè)函數(shù)的返回值是第三個(gè)回調(diào)函數(shù)的參數(shù)。可以對(duì)比下面的2段代碼，體會(huì)下done()和then的差別。

[javascript]?view plain?copy

var?deferred?=?$.Deferred();

//?done()返回的仍然是原來的Deferred對(duì)象

var?done_ret?=?deferred.done(function(data){

alert("data="+data);//5

return?2?*?data;

});

alert(deferred?==?done_ret);//true

done_ret.done(function(data){

alert("data="+data);//5

});

deferred.resolve(?5?);

[javascript]?view plain?copy

var?deferred?=?$.Deferred();

//?then()返回的是一個(gè)新Promise對(duì)象

//then注冊(cè)的回調(diào)函數(shù)的返回值將作為這個(gè)新Promise的參數(shù)

var?then_ret?=?deferred.then(function(data){

alert("data="+data);//5

return?2?*?data;

});

alert(then_ret?==?deferred);//false

then_ret.done(function(data){

alert("data="+data);//10

});

deferred.resolve(?5?);

同樣地，Deferred.then也能夠?qū)崿F(xiàn)rejected和pending狀態(tài)的回調(diào)函數(shù)過濾。

[javascript]?view plain?copy

var?defer?=?$.Deferred();

var?filtered?=?defer.then(?null,?function(?value?)?{

return?value?*?3;

});

defer.reject(?6?);

filtered.fail(function(?value?)?{

alert(?"Value?is?(?3*6?=?)?18:?"?+?value?);

});

下面這段代碼可以實(shí)現(xiàn)chain tasks，解決異步操作中回調(diào)難的問題。

[javascript]?view plain?copy

var?defered?=?$.Deferred();

var?promise1?=?defered.then(function(data){

alert(data);//

return?data+="1";

});

var?promise2?=?promise1.then(function(data){

alert(data);//1

return?data+="2";

});

var?promise3?=?promise2.then(function(data){

alert(data);//12

return?data+="3";

});

promise3.done(function(data){

alert(data);//123

});

defered.resolve("");

正是由于then()這個(gè)特性，我們就可以上面復(fù)雜的AJAX嵌套改成如下形式:

[javascript]?view plain?copy

var?promise1?=?$.ajax(url1);

var?promise2?=?promise1.then(function(data){

return?$.ajax(url2,?{?"data":?data?});

});

var?promise3?=?promise2.then(function(data){

return?$.ajax(url3,?{?"data":?data?});

});

promise3.done(function(data){

//?data?retrieved?from?url3

});

jquery when then方法

jQuery.when(deferreds)

參數(shù)deferreds，一個(gè)或多個(gè)延時(shí)對(duì)象或JS對(duì)象，我們初略的認(rèn)為它就是一個(gè)或多個(gè)異步請(qǐng)求。

例如：$.when($.ajax("page1.php"),?$.ajax("page2.php"))

when()函數(shù)常常和done()函數(shù)、fail()函數(shù)、then()函數(shù)聯(lián)合使用：

done(Function func)?- 當(dāng)deferreds中的處理都完成的時(shí)候執(zhí)行Function回調(diào)函數(shù)

fail(Function func)?- 當(dāng)deferreds中有一個(gè)處理失敗的時(shí)候執(zhí)行Function回調(diào)函數(shù)

then(Function func1,Function func2)- 結(jié)合了done和fail函數(shù)，當(dāng)都成功執(zhí)行func1，當(dāng)有一個(gè)失敗執(zhí)行func2

var?whenResult?=?$.when($.ajax("page1.php"),?$.ajax("page2.php"));

whenResult.done(function(a1,a2){

//函數(shù)內(nèi)容略

//a1和a2倆參數(shù)是when函數(shù)中兩個(gè)ajax請(qǐng)求的相關(guān)jqXHR對(duì)象

});

whenResult.fail(function(){

//函數(shù)內(nèi)容略

})

whenResult.then(successFunc,failureFunc);

如果沒有參數(shù)傳遞給?jQuery.when()，它會(huì)返回一個(gè)resolved狀態(tài)的Promise。

如果向?jQuery.when()?傳入一個(gè)單獨(dú)的延遲對(duì)象，那么會(huì)返回它的 Promise 對(duì)象(延遲方法的一個(gè)子集)。可以繼續(xù)綁定 Promise 對(duì)象的其它方法，例如，?defered.then?。當(dāng)延遲對(duì)象已經(jīng)被解決（resolved）或被拒絕(rejected）（通常是由創(chuàng)建延遲對(duì)象的最初代碼執(zhí)行的），那么就會(huì)調(diào)用適當(dāng)?shù)幕卣{(diào)函數(shù)。例如，由?jQuery.ajax()?返回的 jqXHR 對(duì)象是一并立的延遲對(duì)象并且可以像下面這樣使用：

$.when( $.ajax("test.aspx") ).then(function(data, textStatus, jqXHR){

alert( jqXHR.status ); // alerts 200

});

在多延遲情況下，如果Deferreds延遲對(duì)象一被拒絕（rejected），jQuery.when()觸發(fā)立即調(diào)用 “宿主” Deferred（延遲）對(duì)象的 failCallbacks。請(qǐng)注意在這個(gè)時(shí)間點(diǎn)上，有一些延遲對(duì)象仍然可以是未解決（unresolved）的。 傳遞給failCallbacks的參數(shù)匹配Deferred（延遲）對(duì)象的 failCallbacks被 rejected 拒絕的順序。那么，在這種情況下，如果需要執(zhí)行一些額外的處理，例如，取消所有未完成的 ajax 請(qǐng)求，你可以在閉包中進(jìn)行保持 jqXHR 對(duì)象的引用，并且在 failCallback 中檢查或取消它們。

例子:

Example:?執(zhí)行Ajax請(qǐng)求后兩個(gè)函數(shù)是成功的。

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1, ?a2){

/* a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively */

var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */

if ( /Whip It/.test(jqXHR.responseText) ) {

alert("First page has 'Whip It' somewhere.");

}

});

Example:?執(zhí)行函數(shù)myFunc當(dāng)兩個(gè)Ajax請(qǐng)求是成功的，如果任一或myFailure有一個(gè)錯(cuò)誤。

$.when($.ajax("/page1.php"), $.ajax("/page2.php"))

.then(myFunc, myFailure);

網(wǎng)站題目：jquerythen的簡(jiǎn)單介紹
分享鏈接：http://chinadenli.net/article20/dsdsico.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、Google、網(wǎng)站維護(hù)、App設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)