淺談Angular的$q, defer, promise
1. $q
$q
是Angular
的一種內建服務,它可以使你非同步地執行函式,並且當函式執行完成時它允許你使用函式的返回值(或異常)。
2. defer
defer
的字面意思是延遲,$q.defer()
可以建立一個deferred
例項(延遲物件例項)。
deferred
例項旨在暴露派生的Promise
例項,以及被用來作為成功完成或未成功完成的訊號API
,以及當前任務的狀態。這聽起來好複雜的樣子,總結$q
, defer
, promise
三者之間的關係如下所示。
var deferred = $q.defer(); //通過$q服務註冊一個延遲物件 deferred
var promise = deferred.promise; //通過deferred延遲物件,可以得到一個承諾promise,而promise會返回當前任務的完成結果
defer
的方法:
-
deferred.resolve(value)
成功解決(resolve
)了其派生的promise
。引數value
將來會被用作promise.then(successCallback(value){...}
,errorCallback(reason){...}
,notifyCallback(notify){...})
中successCallback
函式的引數。 -
deferred.reject(reason)
未成功解決其派生的promise
。引數reason
被用來說明未成功的原因。此時deferred
例項的promise
物件將會捕獲一個任務未成功執行的錯誤,promise.catch(errorCallback(reason){...})
。補充一點,promise.catch(errorCallback)
實際上就是promise.then(null, errorCallback)
的簡寫。 -
notify(value)
更新promise
的執行狀態(翻譯的不好,原話是provides updates on the status of the promise's execution
)
defer
的小例子:
function asyncGreet(name) {
var deferred = $q.defer(); //通過$q.defer()建立一個deferred延遲物件,在建立一個deferred例項時,也會建立出來一個派生的promise物件,使用deferred.promise就可以檢索到派生的promise。
deferred.notify('About to greet ' + name + '.'); //延遲物件的notify方法。
if (okToGreet(name)) {
deferred.resolve('Hello, ' + name + '!'); //任務被成功執行
} else {
deferred.reject('Greeting ' + name + ' is not allowed.'); //任務未被成功執行
}
return deferred.promise; //返回deferred例項的promise物件
}
function okToGreet(name) {
//只是mock資料,實際情況將根據相關業務實現程式碼
if(name == 'Superman') return true;
else return false;
}
var promise = asyncGreet('Superman'); //獲得promise物件
//promise物件的then函式會獲得當前任務也就是當前deferred延遲例項的執行狀態。它的三個回撥函式分別會在resolve(), reject() 和notify()時被執行
promise.then(function(greeting) {
alert('Success: ' + greeting);
}, function(reason) {
alert('Failed: ' + reason);
}, function(update) {
alert('Got notification: ' + update);
});
3. promise
當建立一個deferred
例項時,promise
例項也會被建立。通過deferred.promise
就可以檢索到deferred
派生的promise
。
promise
的目的是允許interested parties
訪問deferred
任務完成的結果。
按照CommonJS
的約定,promise
是一個與物件互動的介面,表示一個動作(action
)的結果是非同步的,而且在任何給定的時間點上可能或不可能完成。(這句話好繞口,我的理解是promise
相當於一個承諾,承諾你這個任務在給定的時間點上可能會完成,也可能完成不了。如果完成了那就相當於resolve
, 如果未完成就相當於reject
。不知道這樣理解對不對?)
promise
的方法:
then(successCallback, errorCallback, nitifyCallback)
根據promise
被resolve/reject
,或將要被resolve/reject
,呼叫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
相關文章
- 淺談 PromisePromise
- 淺談promisePromise
- 淺談promise用法Promise
- 對Promise的深情,只好淺談Promise
- Salesforce Javascript(一) Promise 淺談SalesforceJavaScriptPromise
- 淺談 Angular 專案實戰Angular
- 淺談首屏渲染速度及defer和async的異同
- 【譯】淺談Angular中的變化檢測Angular
- 淺談Generator和Promise原理及實現Promise
- 淺談promise和js執行機制(一)PromiseJS
- 淺談promise和js執行機制(二)PromiseJS
- 談談PromisePromise
- 談一談PromisePromise
- 談談你對Promise的理解Promise
- 淺析PromisePromise
- 淺談JavaScript非同步發展與Promise/A+原理實現JavaScript非同步Promise
- 談談 Promise 以及實現 Fetch 的思路Promise
- 淺析Promise原理Promise
- 深入淺出PromisePromise
- 從 Angular Component 和 Directive 的例項化,談談 Angular forRoot 方法的命令由來Angular
- JavaScript之淺析PromiseJavaScriptPromise
- 淺析setTimeout與PromisePromise
- promise由淺入深Promise
- 關於Promise的九深一淺Promise
- 淺淺談ReduxRedux
- 由淺入深,從掌握Promise的基本使用到手寫PromisePromise
- 使用 RxJs Observable 來避免 Angular 應用中的 Promise 使用JSAngularPromise
- JavaScript Promise由淺入深JavaScriptPromise
- 淺談JavaScript中的thisJavaScript
- Angular @Injectable 註解的工作原理淺析Angular
- 淺淺淺談JavaScript作用域JavaScript
- 從 ng build 支援的引數 --prod,談談 Angular workspace configurationUIAngular
- 淺談WebSocketWeb
- 淺談HTMLHTML
- ZooKeeper淺談
- ElasticJob淺談AST
- 淺談flutterFlutter
- 淺談JMM