AngularJS中的promise用法分析

本文實例講述了AngularJS中的promise用法。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)服務項目包括福山網(wǎng)站建設、福山網(wǎng)站制作、福山網(wǎng)頁制作以及福山網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，福山網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到福山省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

JavaScript異步回調有好處也有壞處，回調函數(shù)大量嵌套十分復雜．所以javascript中還有另一種異步處理模式叫promises．在AngularJS中的實現(xiàn)就是$q服務．

下面是一些小例子．

then,catch,finally

在鏈最后的 catch 為整個鏈式處理提供一個異常處理點
在鏈最后的 finally 總是會被執(zhí)行，不管 promise 被處理或者被拒絕，起清理作用

<!DOCTYPE html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <script src="jQuery.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
      var myapp = angular.module('myapp', []);
      myapp.controller('myController', function($scope, $q) {
        $scope.send = function() {
          var deferred = $q.defer();
          var promise = deferred.promise;
          promise
          .then(function() {
            console.log('resolve.....')
          }, function() {
            console.log('reject.....');
          }, function() {
            console.log('notify.....');
          })
          .catch(function() {
            console.log('catch..error..')
          })
          .finally(function() {
            console.log('anywhere will be called..');
          });
          deferred.reject('resolve');
        };
      });
    </script>
    <style type="text/css">
    </style>
  </head>
  <body ng-app="myapp">
    <div ng-controller="myController">
        <button class="btn" ng-click="send()">click</button>
    </div>
  </body>
</html>

then第三個參數(shù)(表征狀態(tài))的應用

<!DOCTYPE html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <script src="jquery.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
      var myapp = angular.module('myapp', []);
      myapp.controller('myController', function($scope, dataService) {
        $scope.send = function() {
          dataService.getData()
          .then(function success(data) {
            console.log(data);
          }, function error(error) {
            console.log(error);
          }, function status(process) {
            console.log(process);
          });
        };
      });
      myapp.factory('dataService', function($q, $interval) {
        return {
          getData : function() {
            var deferred = $q.defer();
            var process = 0;
            var interval = $interval(function() {
              process += 10;
              deferred.notify(process);
              //reject之后不再繼續(xù)運行
              // if (process == 50) {
              //   deferred.reject(process);
              // }
              if (process >= 100) {
                $interval.cancel(interval);
                deferred.resolve(process);
              }
            }, 1000);
            return deferred.promise;
          }
        };
      });
    </script>
    <style type="text/css">
    </style>
  </head>
  <body ng-app="myapp">
    <div ng-controller="myController">
        <button class="btn" ng-click="send()">click</button>
    </div>
  </body>
</html>

then鏈式

<!DOCTYPE html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <script src="jquery.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
      var myapp = angular.module('myapp', []);
      myapp.controller('myController', function($scope, $q) {
        $scope.send = function() {
          var deferred = $q.defer();
          var promise = deferred.promise;
          promise
          .then(function() {
            console.log('1.....')
          })
          .then(function() {
            console.log('2....');
          });
          deferred.resolve('resolve');
        };
      });
    </script>
    <style type="text/css">
    </style>
  </head>
  <body ng-app="myapp">
    <div ng-controller="myController">
        <button class="btn" ng-click="send()">click</button>
    </div>
  </body>
</html>

then鏈會把上一個 then 的返回結果傳遞給調用鏈的下一個 then (如果沒有就是 undefined).

<!DOCTYPE html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <script src="jquery.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
      var myapp = angular.module('myapp', []);
      myapp.controller('myController', function($scope, $q, $timeout) {
        $scope.send = function() {
          var deferred = $q.defer();
          var promise = deferred.promise;
          deferred.resolve('resolve');
          promise
          .then(function(data) {
            console.log(data);
            var _deferred = $q.defer();
            $timeout(function() {
            _deferred.resolve('resolve_');
            }, 1000);
            return _deferred.promise;
          })
          .then(function(data) {
            console.log(data);
          });
        };
      });
    </script>
    <style type="text/css">
    </style>
  </head>
  <body ng-app="myapp">
    <div ng-controller="myController">
        <button class="btn" ng-click="send()">click</button>
    </div>
  </body>
</html>

如果 then 返回一個 promise 對象，下一個 then 只會在這個 promise 被處理結束的時候調用。

更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》

希望本文所述對大家AngularJS程序設計有所幫助。

標題名稱：AngularJS中的promise用法分析
本文鏈接：http://muchs.cn/article8/pishop.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、移動網(wǎng)站建設、軟件開發(fā)、手機網(wǎng)站建設、標簽優(yōu)化、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司