在Angular中使用promise

最新推荐文章于 2020-11-21 13:23:48 发布

写Bug

最新推荐文章于 2020-11-21 13:23:48 发布

阅读量3.2k

点赞数

分类专栏： js 文章标签： angular

本文链接：https://blog.youkuaiyun.com/qq_26598303/article/details/52946244

版权

js 专栏收录该内容

8 篇文章

订阅专栏

在Angular应用中，推荐将网络请求操作放在Service中以分离职责。本文以创建addressBook.service.js为例，介绍如何利用$http服务获取Promise对象，并通过then、catch、finally方法处理响应。在Controller中调用Service，实现数据与视图的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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);
           });
   }
})();