AngularJS中的Promise詳細(xì)介紹及實(shí)例代碼
Angular中的Promise
在用jQuery的時(shí)候就知道 promise 是 Js異步編程模式的一種模式,但是不是很明白他跟JQuery的deferred對(duì)象有什么區(qū)別。隨著公司項(xiàng)目的進(jìn)行,要跟后臺(tái)接數(shù)據(jù)了,所以決定搞定它。
Promise
Promise是一種模式,以同步操作的流程形式來(lái)操作異步事件,避免了層層嵌套,可以鏈?zhǔn)讲僮鳟惒绞录?/p>
我們知道,在編寫(xiě)JavaScript異步代碼時(shí),callback是最最簡(jiǎn)單的機(jī)制,可是用這種機(jī)制的話必須犧牲控制流、異常處理和函數(shù)語(yǔ)義化為代價(jià),甚至?xí)屛覀兊暨M(jìn)出現(xiàn)callback大坑,而promise解決了這個(gè)問(wèn)題。
ES6中Promise、AngularJS內(nèi)置的AngularJS內(nèi)置Q,以及when采用的都是Promises/A規(guī)范,如下:
每個(gè)任務(wù)都有三種狀態(tài):未完成(pending)、完成(fulfilled)、失敗(rejected)。
- pending狀態(tài):可以過(guò)渡到履行或拒絕狀態(tài)。
- fulfilled狀態(tài):不能變?yōu)槠渌魏螤顟B(tài),而且狀態(tài)不能改變,必須有value值。
- rejected狀態(tài):不能變?yōu)槠渌魏螤顟B(tài),而且狀態(tài)不能改變,必須有reason。
狀態(tài)的轉(zhuǎn)移是一次性的,狀態(tài)一旦變成fulfilled(已完成)或者failed(失敗/拒絕),就不能再變了。
function okToGreet(name){
return name === 'Robin Hood';
}
function asyncGreet(name) {
var deferred = $q.defer();
setTimeout(function() {
// 因?yàn)檫@個(gè)異步函數(shù)fn在未來(lái)的異步執(zhí)行,我們把代碼包裝到 $apply 調(diào)用中,一邊正確的觀察到 model 的改變
$scope.$apply(function() {
deferred.notify('About to greet ' + name + '.');
if (okToGreet(name)) {
deferred.resolve('Hello, ' + name + '!');
} else {
deferred.reject('Greeting ' + name + ' is not allowed.');
}
});
}, 1000);
return deferred.promise;
}
var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
alert('Success: ' + greeting);
}, function(reason) {
alert('Failed: ' + reason);
}, function(update) {
alert('Got notification: ' + update);
});
Q Promise的基本用法
上面代碼表示, $q.defer() 構(gòu)建的 deffered 實(shí)例的幾個(gè)方法的作用。如果異步操作成功,則用resolve方法將Promise對(duì)象的狀態(tài)變?yōu)椤俺晒Α保磸膒ending變?yōu)閞esolved);如果異步操作失敗,則用reject方法將狀態(tài)變?yōu)椤笆 保磸膒ending變?yōu)閞ejected)。最后返回 deferred.promise ,我們就可以鏈?zhǔn)秸{(diào)用then方法。
JS將要有原生Promise,ES6中已經(jīng)有Promise對(duì)象,firefox和Chrome 32 beta版本已經(jīng)實(shí)現(xiàn)了基本的Promise API
AngularJs中的$q.defferd
通過(guò) 調(diào)用 $q.defferd 返回deffered對(duì)象以鏈?zhǔn)秸{(diào)用。該對(duì)象將Promises/A規(guī)范中的三個(gè)任務(wù)狀態(tài)通過(guò)API關(guān)聯(lián)。
deffered API
deffered 對(duì)象的方法
- resolve(value):在聲明resolve()處,表明promise對(duì)象由pending狀態(tài)轉(zhuǎn)變?yōu)閞esolve。
- reject(reason):在聲明resolve()處,表明promise對(duì)象由pending狀態(tài)轉(zhuǎn)變?yōu)閞ejected。
- notify(value) :在聲明notify()處,表明promise對(duì)象unfulfilled狀態(tài),在resolve或reject之前可以被多次調(diào)用。
deffered 對(duì)象屬性
promise :最后返回的是一個(gè)新的deferred對(duì)象 promise 屬性,而不是原來(lái)的deferred對(duì)象。這個(gè)新的Promise對(duì)象只能觀察原來(lái)Promise對(duì)象的狀態(tài),而無(wú)法修改deferred對(duì)象的內(nèi)在狀態(tài)可以防止任務(wù)狀態(tài)被外部修改。
Promise API
當(dāng)創(chuàng)建 deferred 實(shí)例時(shí)會(huì)創(chuàng)建一個(gè)新的 promise 對(duì)象,并可以通過(guò) deferred.promise 得到該引用。
promise 對(duì)象的目的是在 deferred 任務(wù)完成時(shí),允許感興趣的部分取得其執(zhí)行結(jié)果。
promise 對(duì)象的方法
then(errorHandler, fulfilledHandler, progressHandler):then方法用來(lái)監(jiān)聽(tīng)一個(gè)Promise的不同狀態(tài)。errorHandler監(jiān)聽(tīng)failed狀態(tài),fulfilledHandler監(jiān)聽(tīng)fulfilled狀態(tài),progressHandler監(jiān)聽(tīng)unfulfilled(未完成)狀態(tài)。此外,notify 回調(diào)可能被調(diào)用 0到多次,提供一個(gè)進(jìn)度指示在解決或拒絕(resolve和rejected)之前。
catch(errorCallback) —— promise.then(null, errorCallback) 的快捷方式
finally(callback) ——讓你可以觀察到一個(gè) promise 是被執(zhí)行還是被拒絕, 但這樣做不用修改最后的 value值。 這可以用來(lái)做一些釋放資源或者清理無(wú)用對(duì)象的工作,不管promise 被拒絕還是解決。 更多的信息請(qǐng)參閱 完整文檔規(guī)范.
通過(guò)then()方法可以實(shí)現(xiàn)promise鏈?zhǔn)秸{(diào)用。
promiseB = promiseA.then(function(result) {
return result + 1;
});
// promiseB 將會(huì)在處理完 promiseA 之后立刻被處理,
// 并且其 value值是promiseA的結(jié)果增加1
$q的其他方法
- $q.when(value):傳遞變量值,promise.then()執(zhí)行成功回調(diào)
- $q.all(promises):多個(gè)promise必須執(zhí)行成功,才能執(zhí)行成功回調(diào),傳遞值為數(shù)組或哈希值,數(shù)組中每個(gè)值為與Index對(duì)應(yīng)的
promise對(duì)象。
angular $apply ->成功響應(yīng)
angular http 請(qǐng)求攔截
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
AngularJS 驗(yàn)證碼60秒倒計(jì)時(shí)功能的實(shí)現(xiàn)
最近在做AngularJS 項(xiàng)目,這是寫(xiě)的一個(gè)60秒倒計(jì)時(shí)功能,下面小編給大家介紹AngularJS 驗(yàn)證碼60秒倒計(jì)時(shí)功能的實(shí)現(xiàn),需要的朋友參考下吧2017-06-06
AngularJs定制樣式插入到ueditor中的問(wèn)題小結(jié)
這篇文章主要介紹了AngularJs定制樣式插入到ueditor中的問(wèn)題小結(jié)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
詳解從angular-cli:1.0.0-beta.28.3升級(jí)到@angular/cli:1.0.0
本篇文章主要介紹了詳解從angular-cli:1.0.0-beta.28.3升級(jí)到@angular/cli:1.0.0,具有一定的參考價(jià)值,有興趣的可以了解一下2017-05-05
AngularJS實(shí)現(xiàn)頁(yè)面定時(shí)刷新
本篇文章主要介紹了AngularJS實(shí)現(xiàn)頁(yè)面定時(shí)刷新,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
AngularJs解決跨域問(wèn)題案例詳解(簡(jiǎn)單方法)
本文通過(guò)一個(gè)案例給大家介紹angularJs解決跨域問(wèn)題,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05
angular或者js怎么確定選中ul中的哪幾個(gè)li
下面小編就為大家?guī)?lái)一篇angular或者js怎么確定選中ul中的哪幾個(gè)li。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Angular2開(kāi)發(fā)環(huán)境搭建教程之VS Code
不久前WebStorm的頻繁卡死終于讓我受不鳥(niǎo)了,我決定換個(gè)輕量級(jí)的編輯器,嘗試了Emacs、Sublime text,最后選擇了vscode。下面這篇文章主要給大家介紹了關(guān)于Angular2開(kāi)發(fā)環(huán)境搭建教程之VS Code的相關(guān)資料,需要的朋友可以參考下。2017-12-12
angular中實(shí)現(xiàn)控制器之間傳遞參數(shù)的方式
本篇文章主要介紹了angular中實(shí)現(xiàn)控制器之間傳遞參數(shù)的方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04

