在初始化控制器之前解析路由解析中的多个promise

Question

我有两个http调用需要在初始化我的控制器之前重新启动，目前使用Angular UI路由器，我有$stateProvider下的resolve map。状态（'stateName'，{stateObject}）我的状态对象如下

    $stateProvider.state('stateName', {
        url  : '/myURL',
        params: {
                 data1: undefined,
                 data2 : undefined
            },
        resolve: {
            dataTobeResolve : function($stateParams,$q) {

                var deferred = $q.defer();
                var deferredObj = {};
                deferredObj.d1 = $q.defer();
                deferredObj.d2 = $q.defer();

                var result = {
                    data1: {},
                    data2: {}
                }

                if(angular.isDefined($stateParams.data1)) {
                    result.data1 = $stateParams.data1;
                    deferredObj.d1.resolve();
                }
                else {
                    httpCall().then(function(response) {
                        AsyncMethodCall(response.data).then(function(resolvedData) {
                            result.data1 = resolvedData;
                            deferredObj.d1.resolve();       
                        });
                    });
                }

                if(angular.isDefined($stateParams.data2)) {
                    result.data2 = $stateParams.data2;
                    deferredObj.d2.resolve();
                }
                else {
                    AsyncMethodCall().then(function(resolvedData) {
                        result.data2 = resolvedData;
                        deferredObj.d2.resolve();       
                    });
                }

                $q.all(deferredObj).then(function() {
                    deferred.resolve(result);
                });
                return deferred.promise;
            }
        }
    });

不管怎么说，尽管有了德雷多布。d1作为resolve controll转到$q.all（deferredObj）的（function（）{}），这是一个意外的行为，我相信在执行此行之前，应该解析deferredObj的所有promise映射，我的控制器得到初始化，尽管其中一个promise已被解析

Answer 1

我发现了这个问题，这是由于将延迟对象传递到$q.all（）而不是promise的哈希/数组。所以下面的代码将解决这个问题

$stateProvider.state('stateName', {
    url  : '/myURL',
    params: {
             data1: undefined,
             data2 : undefined
        },
    resolve: {
        dataTobeResolve : function($stateParams,$q) {

            var deferred = $q.defer();
            var promises = {};
            var d1 = $q.defer();
            var d2 = $q.defer();
            promises.d1 = d1.promise;
            promises.d2 = d2.promise;

            var result = {
                data1: {},
                data2: {}
            }

            if(angular.isDefined($stateParams.data1)) {
                result.data1 = $stateParams.data1;
                d1.resolve();
            }
            else {
                httpCall().then(function(response) {
                    AsyncMethodCall(response.data).then(function(resolvedData) {
                        result.data1 = resolvedData;
                        d1.resolve();       
                    });
                });
            }

            if(angular.isDefined($stateParams.data2)) {
                result.data2 = $stateParams.data2;
                d2.resolve();
            }
            else {
                AsyncMethodCall().then(function(resolvedData) {
                    result.data2 = resolvedData;
                    d2.resolve();       
                });
            }

            $q.all(promises).then(function() {
                deferred.resolve(result);
            });
            return deferred.promise;
        }
    }
});

但我还是很感激有人能提供更好的解决方案

Answer 2

因为$q.all，$超文本传输协议和. so方法都返回promise，所以不需要用$q.defer制造promise。仅使用$q.defer从旧风格的仅回调异步API中做出promise。

使用$q.when从同步源或AngularJS框架外部作出promise。

resolve: {
    dataTobeResolve : function($stateParams,$q) {

        var d1Promise;
        var d2Promise;

        if(angular.isDefined($stateParams.data1)) {
            d1Promise = $q.when($stateParams.data1);
        }
        else {
            d1Promise = httpCall()
              .then(function(response) {
                   return response.data;
            });
        }

        if(angular.isDefined($stateParams.data2)) {
            d2Promise = $q.when($stateParams.data2)
        }
        else {
            d2Promise = httpCall2()
              .then(function(response) {
                  return response.data;      
            });
        }

        return $q.all([d1Promise, d2Promise]);
    }
}

在上述示例中，两个promise是由参数的$q.when创建的，或者是从基于promise的异步API派生的。复合promise是用$q.all方法从两个promise中创建的。

使用派生promise的优点是拒绝会自动结转到最终promise。当前编写的$q.defer方法将挂起状态更改，如果其中一个XHR调用有来自服务器的错误。