在Angular中使用promise

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