摘要:規(guī)范中文是提供的一個(gè)服務(wù)。實(shí)際調(diào)用這個(gè)方法最終在此處加入到隊(duì)列中定義此處調(diào)用進(jìn)入此處是鏈?zhǔn)秸{(diào)用傳參關(guān)鍵,實(shí)際是上一個(gè)的的返回值,所以能知道,如果需要所有的都能取到異步任務(wù)的返回值,就得在的函數(shù)中,將值返回。
promise是什么
這里不解釋promise是什么,因?yàn)槲蚁嘈拍銇?lái)看文章的時(shí)候已經(jīng)知道你什么是promise了。
此處有promise規(guī)范。
Promise/A+規(guī)范 中文
Promise/A+
ES2016:MDN Promise
$q是AngularJS提供的一個(gè)服務(wù)。
$q是跟AngularJS的$rootScope模板集成的,所以在AngularJS中執(zhí)行和拒絕都很快。(編輯器瘋了,dollar符號(hào)就是打不出來(lái),就叫 "dollar"q)
$q是跟AngularJS模板引擎集成的,這意味著在視圖中找到任何Promise都會(huì)在視圖中被執(zhí)行或者拒絕。
如何在AngularJS中使用直接上栗子,程序員都不喜歡聽(tīng)你廢話~〒▽〒
var app = angular.module("app", []) .controller("testController", function ($scope, $q) { //定義一個(gè)defer var defer = $q.defer(); var promise = defer.promise; promise.then(function (data) { //成功后的邏輯處理 }, function (error) { //失敗后的邏輯處理 }); //模擬通過(guò)--實(shí)際應(yīng)該是一個(gè)異步的callback中調(diào)用 defer.resolve("[data]"); //模擬拒絕--實(shí)際應(yīng)該是一個(gè)異步的callback中調(diào)用 defer.reject("[data]"); });鏈?zhǔn)秸{(diào)用
then會(huì)返回一個(gè)新的promise對(duì)象,所以直接jQuery風(fēng)格的鏈?zhǔn)秸{(diào)用。
還是直接上栗子:
var app = angular.module("app", []) .controller("testController", function ($scope, $q) { //定義一個(gè)defer var defer = $q.defer(); var promise = defer.promise; promise.then(function () { console.log("then-resolved-1"); }, function () { console.log("then-rejected-1"); }) .then(function () { console.log("then-resolved-2"); }, function () { console.log("then-rejected-2"); }); //模擬通過(guò)--實(shí)際應(yīng)該是一個(gè)異步的callback中調(diào)用 defer.resolve("[data]"); //模擬拒絕--實(shí)際應(yīng)該是一個(gè)異步的callback中調(diào)用 defer.reject("[data]"); });
來(lái)看下是如何實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的,下面是AngularJS源碼實(shí)現(xiàn):
//angular.js Promise.prototype = { then: function(onFulfilled, onRejected, progressBack) { var result = new Deferred();//此處可以看出,每個(gè)then都會(huì)返回一個(gè)新的Deferred對(duì)象。 this.$$state.pending = this.$$state.pending || []; this.$$state.pending.push([result, onFulfilled, onRejected, progressBack]); if (this.$$state.status > 0) scheduleProcessQueue(this.$$state); return result.promise; }, //其他省略 ... } //Deferred定義 function Deferred() { this.promise = new Promise();//可以看到defer的promise對(duì)象是一個(gè)new Promise() //Necessary to support unbound execution :/ this.resolve = simpleBind(this, this.resolve); this.reject = simpleBind(this, this.reject); this.notify = simpleBind(this, this.notify); }鏈?zhǔn)秸{(diào)用參數(shù)傳遞
看過(guò)上面鏈?zhǔn)秸{(diào)用的栗子和AngularJS的源碼后,大家就能知道每個(gè)then的上下文其實(shí)是不一樣的,因?yàn)槊看味际切耼ew 出來(lái)的Promise對(duì)象。
先給栗子:
var app = angular.module("app", []) .controller("testController", function ($scope, $q) { //定義一個(gè)defer var defer = $q.defer(); var promise = defer.promise; promise.then(function (data) { //... return data;// data = 1 }, function (error) { //... }) .then(function (data) { //... return data;//data = 1 }, function (error) { //... }); //模擬通過(guò)--實(shí)際應(yīng)該是一個(gè)異步的callback中調(diào)用 defer.resolve("1"); });
接下來(lái)看一段源碼解析,看看AngularJS是如何調(diào)用Promise的。
//angular.js Deferred.prototype = { resolve: function(val) { if (this.promise.$$state.status) return; if (val === this.promise) { this.$$reject($qMinErr( "qcycle", "Expected promise to be resolved with value other than itself "{0}"", val)); } else { this.$$resolve(val);//實(shí)際調(diào)用這個(gè)方法 } }, $$resolve: function(val) { var then, fns; fns = callOnce(this, this.$$resolve, this.$$reject); try { if ((isObject(val) || isFunction(val))) then = val && val.then; if (isFunction(then)) { this.promise.$$state.status = -1; then.call(val, fns[0], fns[1], this.notify); } else { this.promise.$$state.value = val; this.promise.$$state.status = 1; scheduleProcessQueue(this.promise.$$state);//最終在此處加入到隊(duì)列中 } } catch (e) { fns[1](e); exceptionHandler(e); } },... //scheduleProcessQueue定義 function scheduleProcessQueue(state) { if (state.processScheduled || !state.pending) return; state.processScheduled = true; nextTick(function() { processQueue(state); });//此處調(diào)用進(jìn)入processQueue } function processQueue(state) { var fn, promise, pending; pending = state.pending; state.processScheduled = false; state.pending = undefined; for (var i = 0, ii = pending.length; i < ii; ++i) { promise = pending[i][0]; fn = pending[i][state.status]; try { if (isFunction(fn)) { promise.resolve(fn(state.value));//此處是鏈?zhǔn)秸{(diào)用傳參關(guān)鍵,fn(state.value)實(shí)際是上一個(gè)then的resolve的返回值,所以能知道,如果需要所有的then都能取到異步任務(wù)的返回值,就得在then的resolve函數(shù)中,將值返回。 } else if (state.status === 1) { promise.resolve(state.value); } else { promise.reject(state.value); } } catch (e) { promise.reject(e); exceptionHandler(e); } } }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/79554.html
摘要:假設(shè)家具廠在一周后做完了這個(gè)衣柜,并如約送到了張先生家包郵哦,親,這就叫做衣柜,也就是已解決。這樣,整個(gè)異步流程就圓滿完成,無(wú)論成功或者失敗,張先生都沒(méi)有往里面投入任何額外的時(shí)間成本。 如果想使用 $http 或者其他異步操作, 那 $q 是必須要掌握的概念啦. Lets get started! 如何理解$q, deferred object ? 形象的講解angular中的$q與p...
摘要:三模式模式其實(shí)包含兩部分和。六化在編碼的時(shí)候,想要用進(jìn)行異步操作流程控制,就要將當(dāng)前的異步回調(diào)函數(shù)封裝成。 一、什么是promise/deferred 模式 promise/deferred 模式是,根據(jù)promise/A 或者它的增強(qiáng)修改版promise/A+ 規(guī)范 實(shí)現(xiàn)的promise異步操作的一種實(shí)現(xiàn)方式。 異步的廣度使用使得回調(diào),嵌套出現(xiàn),但是一但出現(xiàn)深度的嵌套,就會(huì)讓codi...
摘要:如何在中使用要在中使用要使用的內(nèi)置服務(wù)。用來(lái)拒絕可以為字符串對(duì)象等。獲取的執(zhí)行狀態(tài)然后使用這個(gè)函數(shù)來(lái)傳遞它。無(wú)論是成功了還是失敗了當(dāng)結(jié)果可用之后都會(huì)立即異步調(diào)用或者在被執(zhí)行或者拒絕之前可能會(huì)被調(diào)用到多次以提供過(guò)程狀態(tài)的提示。 如何在 AngularJS 中使用 Promise 要在 AngularJS 中使用 Promise, 要使用 AngularJS 的內(nèi)置服務(wù) $q。 我們可以...
摘要:的意思是,從字面意思來(lái)看是用了的方法,繼承原有的方法類(lèi),然后又添加了自己的某些私有方法。用來(lái)實(shí)現(xiàn)代碼如下的意思是,從字面意思來(lái)看是用了的方法。 世界上最遠(yuǎn)的距離不是生與死的距離,而是文檔就在你面前,你依然不知道這個(gè)庫(kù)怎么用。 鄙人IQ不高,已經(jīng)被Q.js虐了幾天。查看了github上kriskowal/q的文檔,現(xiàn)在把幾種看明白了的使用方法整理記錄下來(lái),以下幾種方法可以把nodejs中...
閱讀 2860·2019-08-30 15:44
閱讀 1888·2019-08-29 13:59
閱讀 2845·2019-08-29 12:29
閱讀 1090·2019-08-26 13:57
閱讀 3202·2019-08-26 13:45
閱讀 3330·2019-08-26 10:28
閱讀 825·2019-08-26 10:18
閱讀 1695·2019-08-23 16:52