AngularJS 中的Promise $q服务详解

984 阅读1分钟

###什么是Promise Javascript中异步的实现方式有很多,延时函数、回调函数、以及es6新增的生成器函数,其中Promise也是实现异步的方式之一。 关于javascript中的异步实现方式的详解以及区别,后期会更新博客,敬请期待,此处不再赘述。 ###q服务
简言之q服务是AngularJS中自己封装实现的一种Promise实现。先介绍一下$q常用的几个方法:

  • defer() 创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolve,reject,notify等
  • all() 传入Promise的数组,批量执行,返回一个promise对象
  • when() 传入一个不确定的参数,如果符合Promise标准,就返回一个promise对象。
需要注意的是在Promise中,定义了三种状态:等待状态,完成状态,拒绝状态。
关于状态有两个规定:
1.状态的变更是不可逆的
2.等待状态可以变成完成或者拒绝

####defer()方法 在$q中,可以使用resolve方法,变成完成状态;使用reject方法,变成拒绝状态。 其中defer()用于创建一个deferred对象,defer.promise用于返回一个promise对象,来定义then方法。then中有三个参数,分别是成功回调、失败回调、状态变更回调。 下面看一个公司项目遇到的实例:

'use strict';

angular.module('app')
    .controller('positionCtrl',['$scope','$state','$q','$stateParams','$http',function ($scope,$state,$q,$stateParams,$http) {
        var vm = this;
        vm.position;
        vm.company;
        vm.isLogin = false;
        function getPosition() {
            var def = $q.defer();
            $http.get('/data/position.json?id = ' + $stateParams.id)
                .then(function (resp) {
                    vm.position = resp.data;
                    // console.log(resp.data);
                    // console.log(vm.position);
                    def.resolve(resp);
                }).catch(function () {
                def.reject(err);
            });
            return def.promise;
        };
        function getCompany(id) {
            $http.get('data/company.json?id='+id)
                .then(function (resp) {
                    vm.company = resp.data;
                    // console.log(vm.company);
                })
                .catch(function (err) {
                    console.log(err);
            });
        };
        getPosition().then(function (obj) {
            getCompany(obj.companyId);
        });
    }]);

上述代码业务逻辑其实很简单,首先要获取公司职位vm.position,根据职位信息中的companyId来获取公司vm.company。 在第一个函数中getPosition中,首先调用$q.defer()方法得到一个deferred对象。 **return def.promise;**语句很显然使得函数getPosition返回一个Promise对象,这样在调用 **getPosition()**函数之后可以直接使用.then()方法。

 getPosition().then(function (obj) {
    getCompany(obj.companyId);
});

这样就把两个函数的同步执行,变成了异步执行。 ####all()方法 这个all()方法,可以把多个primise的数组合并成一个。当所有的promise执行成功后,会执行后面的回调。回调中的参数,是每个promise执行的结果。 当批量的执行某些方法时,就可以使用这个方法。

 var funcA = function(){
    var def = $q.defer();
    console.log("funcA");
    //some code
    return def.promise;
}
var funcB = function(){
    var def = $q.defer();
    console.log("funcA");
    //some code
    return def.promise;
}
$q.all([funcA(),funcB()])
    .then(function(result){
        console.log(result);
    });