快捷導(dǎo)航

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

更新時(shí)間：2016年09月14日 15:41:02 作者：xingoo

這篇文章主要介紹了AngularJS 中的Promise --- $q服務(wù)詳解方法的相關(guān)資料,需要的朋友可以參考下

先說(shuō)說(shuō)什么是Promise，什么是$q吧。Promise是一種異步處理模式，有很多的實(shí)現(xiàn)方式，比如著名的Kris Kwal's Q還有JQuery的Deffered。

什么是Promise

以前了解過(guò)Ajax的都能體會(huì)到回調(diào)的痛苦，同步的代碼很容易調(diào)試，但是異步回調(diào)的代碼，會(huì)讓開(kāi)發(fā)者陷入泥潭，無(wú)法跟蹤，比如：

funA(arg1,arg2,function(){
  funcB(arg1,arg2,function(){
    funcC(arg1,arg2,function(){
       xxxx....
    })
  })  
})

本身嵌套就已經(jīng)很不容易理解了，加上不知何時(shí)才觸發(fā)回調(diào)，這就相當(dāng)于雪上加霜了。

但是有了Promise這種規(guī)范，它能幫助開(kāi)發(fā)者用同步的方式，編寫(xiě)異步的代碼，比如在AngularJS中可以使用這種方式：

deferABC.resolve(xxx)
.then(funcSuccess(){},funcError(){},funcNotify(){});

當(dāng)resolve內(nèi)的對(duì)象成功執(zhí)行，就會(huì)觸發(fā)funcSuccess，如果失敗就會(huì)觸發(fā)funcError。有點(diǎn)類(lèi)似

deferABC.resolve(function(){
  Sunccess:funcSuccess,
  error:funcError,
  notify:funcNotify
})

再說(shuō)的直白點(diǎn)，Promise就是一種對(duì)執(zhí)行結(jié)果不確定的一種預(yù)先定義，如果成功，就xxxx；如果失敗，就xxxx，就像事先給出了一些承諾。

比如，小白在上學(xué)時(shí)很懶，平時(shí)總讓舍友帶飯，并且事先跟他說(shuō)好了，如果有韭菜雞蛋就買(mǎi)這個(gè)菜，否則就買(mǎi)西紅柿炒雞蛋；無(wú)論買(mǎi)到買(mǎi)不到都要記得帶包煙。

小白讓舍友帶飯()
.then(韭菜雞蛋，西紅柿炒雞蛋)
.finally(帶包煙)

$q服務(wù)

q服務(wù)是AngularJS中自己封裝實(shí)現(xiàn)的一種Promise實(shí)現(xiàn)，相對(duì)與Kris Kwal's Q要輕量級(jí)的多。
先介紹一下$q常用的幾個(gè)方法：

defer() 創(chuàng)建一個(gè)deferred對(duì)象，這個(gè)對(duì)象可以執(zhí)行幾個(gè)常用的方法，比如resolve,reject,notify等
all() 傳入Promise的數(shù)組，批量執(zhí)行，返回一個(gè)promise對(duì)象
when() 傳入一個(gè)不確定的參數(shù)，如果符合Promise標(biāo)準(zhǔn)，就返回一個(gè)promise對(duì)象。

在Promise中，定義了三種狀態(tài)：等待狀態(tài)，完成狀態(tài)，拒絕狀態(tài)。

關(guān)于狀態(tài)有幾個(gè)規(guī)定：

1 狀態(tài)的變更是不可逆的
2 等待狀態(tài)可以變成完成或者拒絕

defer()方法

在$q中，可以使用resolve方法，變成完成狀態(tài)；使用reject方法，變成拒絕狀態(tài)。

下面看看 $q的簡(jiǎn)單使用：

<html ng-app="myApp">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
  <div ng-controller="myctrl">
    {{test}}
  </div>
  <script type="text/javascript">
     var myAppModule = angular.module("myApp",[]);
     myAppModule.controller("myctrl",["$scope","$q",function($scope, $ q ){
      $scope.test = 1;//這個(gè)只是用來(lái)測(cè)試angularjs是否正常的，沒(méi)其他的作用

      var defer1 = $q.defer();
      var promise1 = defer1.promise;

      promise1
      .then(function(value){
        console.log("in promise1 ---- success");
        console.log(value);
      },function(value){
        console.log("in promise1 ---- error");
        console.log(value);
      },function(value){
        console.log("in promise1 ---- notify");
        console.log(value);
      })
      .catch(function(e){
        console.log("in promise1 ---- catch");
        console.log(e);
      })
      .finally(function(value){
        console.log('in promise1 ---- finally');
        console.log(value);
      });

      defer1.resolve("hello");
      // defer1.reject("sorry,reject");
     }]);
  </script>
</body>
</html>

其中defer()用于創(chuàng)建一個(gè)deferred對(duì)象，defer.promise用于返回一個(gè)promise對(duì)象，來(lái)定義then方法。then中有三個(gè)參數(shù)，分別是成功回調(diào)、失敗回調(diào)、狀態(tài)變更回調(diào)。

其中resolve中傳入的變量或者函數(shù)返回結(jié)果，會(huì)當(dāng)作第一個(gè)then方法的參數(shù)。then方法會(huì)返回一個(gè)promise對(duì)象，因此可以寫(xiě)成

xxxx
.then(a,b,c)
.then(a,b,c)
.then(a,b,c)
.catch()
.finally()

繼續(xù)說(shuō)說(shuō)上面那段代碼，then...catch...finally可以想想成java里面的try...catch...finally。

all()方法

這個(gè)all()方法，可以把多個(gè)primise的數(shù)組合并成一個(gè)。當(dāng)所有的promise執(zhí)行成功后，會(huì)執(zhí)行后面的回調(diào)。回調(diào)中的參數(shù)，是每個(gè)promise執(zhí)行的結(jié)果。

當(dāng)批量的執(zhí)行某些方法時(shí)，就可以使用這個(gè)方法。

   var funcA = function(){
        console.log("funcA");
        return "hello,funA";
      }
      var funcB = function(){
        console.log("funcB");
        return "hello,funB";
      }
      $q.all([funcA(),funcB()])
      .then(function(result){
        console.log(result);
      });

執(zhí)行的結(jié)果：

funcA
funcB
Array [ "hello,funA", "hello,funB" ]

when()方法

when方法中可以傳入一個(gè)參數(shù)，這個(gè)參數(shù)可能是一個(gè)值，可能是一個(gè)符合promise標(biāo)準(zhǔn)的外部對(duì)象。

   var funcA = function(){
        console.log("funcA");
        return "hello,funA";
      }
      $q.when(funcA())
      .then(function(result){
        console.log(result);
      });

當(dāng)傳入的參數(shù)不確定時(shí)，可以使用這個(gè)方法。

hello,funA

以上就是對(duì)AngularJS 中的Promise --- $q服務(wù)的資料詳細(xì)介紹，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: