淺談Angular的$q, defer, promise
1. $q
$q是Angular的一種內(nèi)置服務,它可以使你異步地執(zhí)行函數(shù),并且當函數(shù)執(zhí)行完成時它允許你使用函數(shù)的返回值(或異常)。
2. defer
defer的字面意思是延遲,$q.defer() 可以創(chuàng)建一個deferred實例(延遲對象實例)。
deferred 實例旨在暴露派生的Promise 實例,以及被用來作為成功完成或未成功完成的信號API,以及當前任務的狀態(tài)。這聽起來好復雜的樣子,總結(jié)$q, defer, promise三者之間的關(guān)系如下所示。
var deferred = $q.defer(); //通過$q服務注冊一個延遲對象 deferred var promise = deferred.promise; //通過deferred延遲對象,可以得到一個承諾promise,而promise會返回當前任務的完成結(jié)果
defer的方法:
- deferred.resolve(value) 成功解決(resolve)了其派生的promise。參數(shù)value將來會被用作promise.then(successCallback(value){...}, errorCallback(reason){...}, notifyCallback(notify){...})中successCallback函數(shù)的參數(shù)。
- deferred.reject(reason) 未成功解決其派生的promise。參數(shù)reason被用來說明未成功的原因。此時deferred實例的promise對象將會捕獲一個任務未成功執(zhí)行的錯誤,promise.catch(errorCallback(reason){...})。補充一點,promise.catch(errorCallback)實際上就是promise.then(null, errorCallback)的簡寫。
- notify(value) 更新promise的執(zhí)行狀態(tài)(翻譯的不好,原話是provides updates on the status of the promise's execution)
defer的小例子:
function asyncGreet(name) { var deferred = $q.defer(); //通過$q.defer()創(chuàng)建一個deferred延遲對象,在創(chuàng)建一個deferred實例時,也會創(chuàng)建出來一個派生的promise對象,使用deferred.promise就可以檢索到派生的promise。 deferred.notify('About to greet ' + name + '.'); //延遲對象的notify方法。 if (okToGreet(name)) { deferred.resolve('Hello, ' + name + '!'); //任務被成功執(zhí)行 } else { deferred.reject('Greeting ' + name + ' is not allowed.'); //任務未被成功執(zhí)行 } return deferred.promise; //返回deferred實例的promise對象 } function okToGreet(name) { //只是mock數(shù)據(jù),實際情況將根據(jù)相關(guān)業(yè)務實現(xiàn)代碼 if(name == 'Superman') return true; else return false; } var promise = asyncGreet('Superman'); //獲得promise對象 //promise對象的then函數(shù)會獲得當前任務也就是當前deferred延遲實例的執(zhí)行狀態(tài)。它的三個回調(diào)函數(shù)分別會在resolve(), reject() 和notify()時被執(zhí)行 promise.then(function(greeting) { alert('Success: ' + greeting); }, function(reason) { alert('Failed: ' + reason); }, function(update) { alert('Got notification: ' + update); });
3. promise
當創(chuàng)建一個deferred實例時,promise實例也會被創(chuàng)建。通過deferred.promise就可以檢索到deferred派生的promise。
promise的目的是允許interested parties 訪問deferred任務完成的結(jié)果。
按照CommonJS的約定,promise是一個與對象交互的接口,表示一個動作(action)的結(jié)果是異步的,而且在任何給定的時間點上可能或不可能完成。(這句話好繞口,我的理解是promise相當于一個承諾,承諾你這個任務在給定的時間點上可能會完成,也可能完成不了。如果完成了那就相當于resolve, 如果未完成就相當于reject。不知道這樣理解對不對?)
promise 的方法:
- then(successCallback, errorCallback, nitifyCallback) 根據(jù)promise被resolve/reject,或?qū)⒁籸esolve/reject,調(diào)用successCallback/errorCallback。
- catch(errorCallback) then(null, errorCallback)的縮寫。
- finally(callback, notifyCallback)
補充說明:
promise.then()會返回一個新的衍生promise,形成promise鏈。例如: promiseB = promiseA.then(function(result) { return result + 1; }); // promiseB will be resolved immediately after promiseA is resolved and its value // will be the result of promiseA incremented by 1
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
- AngularJS中update兩次出現(xiàn)$promise屬性無法識別的解決方法
- AngularJS中的Promise詳細介紹及實例代碼
- AngularJS 中的Promise --- $q服務詳解
- 詳解Javacript和AngularJS中的Promises
- AngularJS中處理多個promise的方式
- Angular中的Promise對象($q介紹)
- 淺析Angular2子模塊以及異步加載
- 詳解Angular.js的$q.defer()服務異步處理
- AngularJS出現(xiàn)$http異步后臺無法獲取請求參數(shù)問題的解決方法
- AngularJS 實現(xiàn)按需異步加載實例代碼
- angularjs 處理多個異步請求方法匯總
- AngularJS中的promise用法分析
相關(guān)文章
AngularJS監(jiān)聽ng-repeat渲染完成的方法
這篇文章主要介紹了AngularJS監(jiān)聽ng-repeat渲染完成的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03Angular?Tree?Shaking優(yōu)化機制原理詳解
這篇文章主要為大家介紹了Angular?Tree?Shaking優(yōu)化機制原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10利用Angularjs和bootstrap實現(xiàn)購物車功能
在學習了如何簡單開始一個Angular程序之后,跟著網(wǎng)上的教程我也來實現(xiàn)一個購物車功能,為了減少頁面樣式設(shè)計我使用了bootstrap來偷懶,現(xiàn)在分享給大家,有需要的可以參考借鑒。2016-08-08AngularJS基礎(chǔ) ng-cut 指令介紹及簡單示例
本文主要介紹AngularJS ng-cut 指令,這里對ng-cut指令的基礎(chǔ)資料進行了整理,和詳細介紹,并附上代碼示例和實現(xiàn)效果圖,學習AngularJS 指令的朋友可以參考下2016-08-08基于angular6.0實現(xiàn)的一個組件懶加載功能示例
這篇文章主要介紹了基于angular6.0實現(xiàn)的一個組件懶加載功能示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04