AngularJS 中的Promise --- $q服務(wù)詳解

什么是Promise

Javascript中異步的實現(xiàn)方式有很多,延時函數(shù)、回調(diào)函數(shù)、以及es6新增的生成器函數(shù),其中Promise也是實現(xiàn)異步的方式之一。
關(guān)于javascript中的異步實現(xiàn)方式的詳解以及區(qū)別,后期會更新博客,敬請期待,此處不再贅述。

$q服務(wù)

簡言之$q服務(wù)是AngularJS中自己封裝實現(xiàn)的一種Promise實現(xiàn)。先介紹一下$q常用的幾個方法:

  • defer() 創(chuàng)建一個deferred對象,這個對象可以執(zhí)行幾個常用的方法,比如resolve,reject,notify等
  • all() 傳入Promise的數(shù)組,批量執(zhí)行,返回一個promise對象
  • when() 傳入一個不確定的參數(shù),如果符合Promise標(biāo)準(zhǔn),就返回一個promise對象。
需要注意的是在Promise中,定義了三種狀態(tài):等待狀態(tài),完成狀態(tài),拒絕狀態(tài)。
關(guān)于狀態(tài)有兩個規(guī)定:
1.狀態(tài)的變更是不可逆的
2.等待狀態(tài)可以變成完成或者拒絕

defer()方法

在$q中,可以使用resolve方法,變成完成狀態(tài);使用reject方法,變成拒絕狀態(tài)。
其中defer()用于創(chuàng)建一個deferred對象,defer.promise用于返回一個promise對象,來定義then方法。then中有三個參數(shù),分別是成功回調(diào)、失敗回調(diào)、狀態(tài)變更回調(diào)。
下面看一個公司項目遇到的實例:

'use strict';

angular.module('app')
    .controller('positionCtrl',['$scope','$state','$q','$stateParams','$http',function ($scope,$state,$q,$stateParams,$http) {
        var vm = this;
        vm.position;
        vm.company;
        vm.isLogin = false;
        function getPosition() {
            var def = $q.defer();
            $http.get('/data/position.json?id = ' + $stateParams.id)
                .then(function (resp) {
                    vm.position = resp.data;
                    // console.log(resp.data);
                    // console.log(vm.position);
                    def.resolve(resp);
                }).catch(function () {
                def.reject(err);
            });
            return def.promise;
        };
        function getCompany(id) {
            $http.get('data/company.json?id='+id)
                .then(function (resp) {
                    vm.company = resp.data;
                    // console.log(vm.company);
                })
                .catch(function (err) {
                    console.log(err);
            });
        };
        getPosition().then(function (obj) {
            getCompany(obj.companyId);
        });
    }]);

上述代碼業(yè)務(wù)邏輯其實很簡單,首先要獲取公司職位vm.position,根據(jù)職位信息中的companyId來獲取公司vm.company。
在第一個函數(shù)中g(shù)etPosition中,首先調(diào)用$q.defer()方法得到一個deferred對象。 return def.promise;語句很顯然使得函數(shù)getPosition返回一個Promise對象,這樣在調(diào)用 getPosition()函數(shù)之后可以直接使用.then()方法。

 getPosition().then(function (obj) {
            getCompany(obj.companyId);
        });

這樣就把兩個函數(shù)的同步執(zhí)行,變成了異步執(zhí)行。

all()方法

這個all()方法,可以把多個primise的數(shù)組合并成一個。當(dāng)所有的promise執(zhí)行成功后,會執(zhí)行后面的回調(diào)?;卣{(diào)中的參數(shù),是每個promise執(zhí)行的結(jié)果。
當(dāng)批量的執(zhí)行某些方法時,就可以使用這個方法。

 var funcA = function(){
                var def = $q.defer();
                console.log("funcA");
                //some code
                return def.promise;
            }
var funcB = function(){
                var def = $q.defer();
                console.log("funcA");
                //some code
                return def.promise;
            }
$q.all([funcA(),funcB()])
            .then(function(result){
                console.log(result);
            });
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 其實在 Javascript 中,有另外一種異步處理模式:更屌,在 Javascript 里面經(jīng)常被叫做Promi...
    JasonCooper閱讀 876評論 0 2
  • 00、前言Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強大。它由社區(qū)...
    夜幕小草閱讀 2,217評論 0 12
  • Promise 的含義 一句話概括一下promise的作用:可以將異步操作以同步操作的流程表達(dá)出來,避免了層層嵌套...
    雪萌萌萌閱讀 5,648評論 0 7
  • 突然想想 本周需要連續(xù)上五天班 就有點怠慢的情緒 周一都是忙碌的,而我每次周一早上總是什么事都不想做,大概一段時間...
    Ermao閱讀 146評論 0 1
  • 一九四八年一天早晨 一位少年從女友的床上爬起來 上了一艘破舊的輪船 船上全是和他一樣的猶太人后裔 其實他們已不會講...
    楊孜閱讀 322評論 0 0

友情鏈接更多精彩內(nèi)容