成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

AngularJS中$q的promise使用及鏈?zhǔn)秸{(diào)用傳值問題

hiyayiji / 3163人閱讀

摘要:規(guī)范中文是提供的一個服務(wù)。實際調(diào)用這個方法最終在此處加入到隊列中定義此處調(diào)用進(jìn)入此處是鏈?zhǔn)秸{(diào)用傳參關(guān)鍵,實際是上一個的的返回值,所以能知道,如果需要所有的都能取到異步任務(wù)的返回值,就得在的函數(shù)中,將值返回。

promise是什么

這里不解釋promise是什么,因為我相信你來看文章的時候已經(jīng)知道你什么是promise了。
此處有promise規(guī)范。

Promise/A+規(guī)范 中文
Promise/A+
ES2016:MDN Promise

$q

$q是AngularJS提供的一個服務(wù)。

$q是跟AngularJS的$rootScope模板集成的,所以在AngularJS中執(zhí)行和拒絕都很快。(編輯器瘋了,dollar符號就是打不出來,就叫 "dollar"q)

$q是跟AngularJS模板引擎集成的,這意味著在視圖中找到任何Promise都會在視圖中被執(zhí)行或者拒絕。

如何在AngularJS中使用

直接上栗子,程序員都不喜歡聽你廢話~〒▽〒

        var app = angular.module("app", [])
            .controller("testController", function ($scope, $q) {
                //定義一個defer
                var defer = $q.defer();
                var promise = defer.promise;
                promise.then(function (data) {
                    //成功后的邏輯處理
                }, function (error) {
                    //失敗后的邏輯處理
                });
                //模擬通過--實際應(yīng)該是一個異步的callback中調(diào)用
                defer.resolve("[data]");
                //模擬拒絕--實際應(yīng)該是一個異步的callback中調(diào)用
                defer.reject("[data]");
            });
鏈?zhǔn)秸{(diào)用

then會返回一個新的promise對象,所以直接jQuery風(fēng)格的鏈?zhǔn)秸{(diào)用。
還是直接上栗子:

        var app = angular.module("app", [])
            .controller("testController", function ($scope, $q) {
                //定義一個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");
                });
                //模擬通過--實際應(yīng)該是一個異步的callback中調(diào)用
                defer.resolve("[data]");
                //模擬拒絕--實際應(yīng)該是一個異步的callback中調(diào)用
                defer.reject("[data]");
            });

來看下是如何實現(xiàn)鏈?zhǔn)秸{(diào)用的,下面是AngularJS源碼實現(xiàn):

//angular.js
  Promise.prototype = {
    then: function(onFulfilled, onRejected, progressBack) {
      var result = new Deferred();//此處可以看出,每個then都會返回一個新的Deferred對象。

      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對象是一個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ù)傳遞

看過上面鏈?zhǔn)秸{(diào)用的栗子和AngularJS的源碼后,大家就能知道每個then的上下文其實是不一樣的,因為每次都是新new 出來的Promise對象。
先給栗子:

    var app = angular.module("app", [])
        .controller("testController", function ($scope, $q) {
            //定義一個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) {
                //...
            });
            //模擬通過--實際應(yīng)該是一個異步的callback中調(diào)用
            defer.resolve("1");
        });

接下來看一段源碼解析,看看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);//實際調(diào)用這個方法
      }

    },

    $$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);//最終在此處加入到隊列中
        }
      } 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)實際是上一個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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/79554.html

相關(guān)文章

  • Angular $q 完全指南

    摘要:假設(shè)家具廠在一周后做完了這個衣柜,并如約送到了張先生家包郵哦,親,這就叫做衣柜,也就是已解決。這樣,整個異步流程就圓滿完成,無論成功或者失敗,張先生都沒有往里面投入任何額外的時間成本。 如果想使用 $http 或者其他異步操作, 那 $q 是必須要掌握的概念啦. Lets get started! 如何理解$q, deferred object ? 形象的講解angular中的$q與p...

    U2FsdGVkX1x 評論0 收藏0
  • promise/deferred 模式原理分析和實現(xiàn)

    摘要:三模式模式其實包含兩部分和。六化在編碼的時候,想要用進(jìn)行異步操作流程控制,就要將當(dāng)前的異步回調(diào)函數(shù)封裝成。 一、什么是promise/deferred 模式 promise/deferred 模式是,根據(jù)promise/A 或者它的增強修改版promise/A+ 規(guī)范 實現(xiàn)的promise異步操作的一種實現(xiàn)方式。 異步的廣度使用使得回調(diào),嵌套出現(xiàn),但是一但出現(xiàn)深度的嵌套,就會讓codi...

    gclove 評論0 收藏0
  • AngularJS 使用 Promise

    摘要:如何在中使用要在中使用要使用的內(nèi)置服務(wù)。用來拒絕可以為字符串對象等。獲取的執(zhí)行狀態(tài)然后使用這個函數(shù)來傳遞它。無論是成功了還是失敗了當(dāng)結(jié)果可用之后都會立即異步調(diào)用或者在被執(zhí)行或者拒絕之前可能會被調(diào)用到多次以提供過程狀態(tài)的提示。 如何在 AngularJS 中使用 Promise 要在 AngularJS 中使用 Promise, 要使用 AngularJS 的內(nèi)置服務(wù) $q。 我們可以...

    voidking 評論0 收藏0
  • Q.js幾種創(chuàng)建promise對象方法對比

    摘要:的意思是,從字面意思來看是用了的方法,繼承原有的方法類,然后又添加了自己的某些私有方法。用來實現(xiàn)代碼如下的意思是,從字面意思來看是用了的方法。 世界上最遠(yuǎn)的距離不是生與死的距離,而是文檔就在你面前,你依然不知道這個庫怎么用。 鄙人IQ不高,已經(jīng)被Q.js虐了幾天。查看了github上kriskowal/q的文檔,現(xiàn)在把幾種看明白了的使用方法整理記錄下來,以下幾種方法可以把nodejs中...

    fsmStudy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<