在Angular中使用promise

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/qq_26598303/article/details/52946244

在ng中最好將網絡請求放在service中，從而簡化controller，使controller專注做自己的“橋樑”工作，即連接數據與視圖。比如我們在做一個通訊錄，所以我們可以這樣做：
1.建一個service叫addressBook.service.js

(function () {
    'use strict';
  angular
    .module('gulpAngularProject')
    .service('addressBookService', addressBookService);
   function addressBookService ( $http,$q ) {
       /**
        * 用於多個接口同時請求
        * @param taskArray (array) [promise任務的數組]
        */
       this.promiseAll = function(taskArray) {
           return $q.all(taskArray);
       },
       /**
        * 獲得通訊錄列表
        */
        this.getUserInfoContactList = function () {
            var defered = $q.defer();
            $http({
                method: 'GET',
                url: 'getUserInfoContactList'
            })
                .success(function (data) {
                    defered.resolve(data);
                })
                .error(function (err) {
                    defered.reject(err);
                });
            return defered.promise;
        }
   }
})();

在這裏我們需要用http與 q服務，http方法返回的是一個由 q這個Service提供的Promise對象，事實上Promise對象有三個通用方法：then, catch, finally。 上述的success和error是$http提供的兩個額外的方法。

2.然後在controller中就可以這樣用：

(function () {
    'use strict';
  angular
    .module('gulpAngularProject')
    .controller('addressBookController', addressBookController);
   function addressBookController ( addressBookService ) {
       // 處理一個請求成功回調後再處理另一個請求的情況
       addressBookService.getUserInfoContactList()
           .then(function (resolveData) {
               // 成功返回的數據
               console.log(resolveData);
               // 返回這個請求成功後要處理的另一個請求，所以下面又可以then下去
               return addressBookService.getUserInfoContactList()
           })
           .then(function (resolveData) {
               console.log(resolveData);
           })
           .catch(function (rejectData) {
               // 錯誤的統一捕捉
               console.log(rejectData);
           });

       // 處理多個請求同時發起的情況
       var task1 = addressBookService.getUserInfoContactList();
       var task2 = addressBookService.getUserInfoContactList();
       var task3 = addressBookService.getUserInfoContactList();
       // 使用在addressBookService裏封裝的方法，其實就是$q.all(taskArray)
       addressBookService.promiseAll([task1,task2,task3])
           .then(function (resolveArray) {
               // 返回的是task1、2、3成功後的數據數組
               console.log(resolveArray);
           })
           .catch(function (rejectData) {
               console.log(rejectData);
           });
   }
})();