摘要:假設家具廠在一周后做完了這個衣柜,并如約送到了張先生家包郵哦,親,這就叫做衣柜,也就是已解決。這樣,整個異步流程就圓滿完成,無論成功或者失敗,張先生都沒有往里面投入任何額外的時間成本。
如果想使用 $http 或者其他異步操作, 那 $q 是必須要掌握的概念啦. Let"s get started!
如何理解$q, deferred object ?形象的講解angular中的$q與promise
如何創建 promise -1假設有一個家具廠,而它有一個VIP客戶張先生。
有一天張先生需要一個豪華衣柜,于是,他打電話給家具廠說我需要一個衣柜,回頭做好了給我送來,這個操作就叫$q.defer,也就是延期,因為這個衣柜不是現在要的,所以張先生這是在發起一個可延期的請求。
同時,家具廠給他留下了一個回執號,并對他說:我們做好了會給您送過去,放心吧。這叫做promise,也就是承諾。
這樣,這個defer算是正式創建了,于是他把這件事記錄在自己的日記上,并且同時記錄了回執號,這叫做deferred,也就是已延期事件。
現在,張先生就不用再去想著這件事了,該做什么做什么,這就是“異步”的含義。
假設家具廠在一周后做完了這個衣柜,并如約送到了張先生家(包郵哦,親),這就叫做deferred.resolve(衣柜),也就是“已解決”。而這時候張先生只要簽收一下這個(衣柜)參數就行了,當然,這個“郵包”中也不一定只有衣柜,還可以包含別的東西,比如廠家宣傳資料、產品名錄等。整個過程中輕松愉快,誰也沒等誰,沒有浪費任何時間。
假設家具廠在評估后發現這個規格的衣柜我們做不了,那么它就需要deferred.reject(理由),也就是“拒絕”。拒絕沒有時間限制,可以發生在給出承諾之后的任何時候,甚至可能發生在快做完的時候。而且拒絕時候的參數也不僅僅限于理由,還可以包含一個道歉信,違約金之類的,總之,你想給他什么就給他什么,如果你覺得不會惹惱客戶,那么不給也沒關系。
假設家具廠發現,自己正好有一個符合張先生要求的存貨,它就可以用$q.when(現有衣柜)來把這個承諾給張先生,這件事就立即被解決了,皆大歡喜,張先生可不在乎你是從頭做的還是現有的成品,只會驚嘆于你們的效率之高。
假設這個家具廠對客戶格外的細心,它還可能通過deferred.notify(進展情況)給張先生發送進展情況的“通知”。
這樣,整個異步流程就圓滿完成,無論成功或者失敗,張先生都沒有往里面投入任何額外的時間成本。
好,我們再擴展一下這個故事:
張先生這次需要做一個桌子,三把椅子,一張席夢思,但是他不希望今天收到個桌子,明天收到個椅子,后天又得簽收一次席夢思,而是希望家具廠做好了之后一次性送過來,但是他下單的時候又是分別下單的,那么他就可以重新跟家具廠要一個包含上述三個承諾的新承諾,這就是$q.all(桌子承諾,椅子承諾,席夢思承諾),
這樣,他就不用再關注以前的三個承諾了,直接等待這個新的承諾完成,到時候只要一次性簽收了前面的這些承諾就行了。
$q 支持兩種寫法, 第一種是類似于ES6標準構造函數寫法
$q(function resolver (resolve, reject) {})
注意:
+ ES6 寫法并不支持 progress/notify 的回調函數 + 在構造函數中拋異常也并不會顯式的reject the promise
// var iWantResolve = false; var iWantResolve = true; function es6promise() { return $q(function (resolve, reject) { $timeout(function () { if (iWantResolve) { resolve("es6promise resolved"); } else { reject("es6promise reject"); } }, 1000) }) }promise 的方法
promise.then(successCb, errCb, notifyCb)
其中successCb 將在 promise resolve 后被調用, errCb 將在 promise reject 后被調
notifyCb 將在 deferred.notify 后被調用, 可以多次調用
promise.catch == promise.then(null, errCb), 用于處理之前沒有被處理的 rejected promise
promise.finally 將最后被調用, 一般用于資源釋放的清理操作
es6promise() .then(function (data) { console.log(data); }) .catch(function (err) { console.log(err); }); // if(iWantResolve == true) output: es6promise resolved // if(iWantResolve = false) output: es6promise reject如何創建 promise -2
第二種是類似于 commonJS 的寫法 $q.deferred()
function commonJsPromise() { var deferred = $q.defer(); $timeout(function () { deferred.notify("commonJS notify"); if (iWantResolve) { deferred.resolve("commonJS resolved"); } else { deferred.reject("commonJS reject"); } }, 500); return deferred.promise; } commonJsPromise() .then(function /** success callback**/(data) { console.log(data); }, function /** error callback **/ (err) { console.log(err); }, function /** progress callback **/ (update) { console.log(update); }); // if(iWantResolve == true) output: commonJS notify commonJS resolved // if(iWantResolve = false) output: commonJS notify commonJS reject$q.all
$q.all([promise1, promise1]) 接受一個包含若干個 promise 的數組,
等所有的 promise resolve 后, 其本身 resolve 包含上述結果的數組 [data1, data2]
如果上述 promise 有一個 reject, 那么$q.all() 會把這個 rejected promise 作為其 rejected promise (只有一個哦)
progress/notify 的 callback 并沒有用
$q.all([es6promise(), commonJsPromise()]) .then(function (dataArr) { console.log("$q.all: ", dataArr); }, function (err) { console.log("$q.all: ", err) }, function /** unnecessary **/ (update) { console.log("$q.all", update); }); // if(iWantResolve == true) output: $q.all: ["es6promise resolved", "commonJS resolved"] // if(iWantResolve = false) output: $q.all: es6promise reject$q.reject, $q.when, $q.resolve
$q.reject() 立即返回一個rejected 的 promise, 在鏈式調用的時候很有用
$q.resolve == $q.when(value, successCb, errorCb, progressCb)
value 可能是一個 then-able 的 obj(即可以是 $q.defer() 返回的, 也可以是其他庫產生的), 也可能是任意數據, 但是 $q.when 最終都會返回一個 promise
$q.when 既可以寫成上述的構造函數形式, 也可以寫成 $q.when(value).then(fn, fn, fn) 的形式
$q.reject("instant reject") .catch(function (err) { console.log(err); }); // output: instant reject $q.when(commonJsPromise(), function /** success callback **/(data) { console.log("$q.when success callback function: " + data); return "$q.when success callback return another value"; }) .then(function (data) { console.log("$q.when then function:" + data); }); // if(iWantResolve == true) output: // $q.when success callback functionL: commonJS resolved // $q.when then function:$q.when success callback return another value // if(iWantResolve = false) output: // $q.when err callback function: commonJS reject // $q.when then function:undefined $q.when("some value", function (data){ console.log(data); }) // output: some valuepromise chains 鏈式調用
任何在 successCb, errCb 中返回的非 $q.reject()對象, 都將成為一個 resolve 的 promise.
所以可以出現如下語法 promise.then().then().then()
$q.when("1") .then(function (data) { console.log(data); return $q.reject(2); }) .catch(function (err) { console.log(err); return 3; }) .then(function (data) { console.log(data); }) // output: 1 2 3參考資料
AngularJS Documentation for $q
形象的講解angular中的$q與promise
Angular Promise Chaining Explained
$q.when() Is The Missing $q.resolve() Method In AngularJS
How does Angular $q.when work?
$q.when(promise) calls resolve() instead of reject()
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91589.html
摘要:不過細想想,我郵只有前端的選修課啥的,課程也不是那么就業導向。至少目前,很少有大公司完全把作為前后端通用的技術棧。不能把簡單看做是在服務端的延展。編譯這個思想在前端領域很重要不改變現有的語言環境同時進行最佳的工程實踐。 P.S. 噴神請繞道,大神勿噴,不引戰,不攻擊,不鉆牛角尖。 大二時第一次接觸前端。許多同學估計都想過要做一個網站,大部分又是從PHP開始的(誰讓它是世界上最好的語言呢...
摘要:我承認從搞笑文章你糟蹋了中得到了一點靈感,不過我要再次說明,我無意嘲笑框架作者。庫很好啊,我希望看到大家一致贊同遠離的是框架。 原文《No more JS frameworks》 中文版翻譯:老碼農 翻譯版: 日語 JS 框架看上去就像死亡和納稅,必然發生,無法避免。如果我能變成一只蒼蠅趴在墻上,我就能確定每次啟動一個新項目的時候,他們討論的第一個問題肯定是:我們要用哪個 JS ...
閱讀 3315·2021-11-12 10:36
閱讀 2467·2021-11-02 14:43
閱讀 2146·2019-08-30 14:23
閱讀 3463·2019-08-30 13:08
閱讀 919·2019-08-28 18:09
閱讀 3129·2019-08-26 12:22
閱讀 3141·2019-08-23 18:24
閱讀 2017·2019-08-23 18:17