angularjs - AngularJS：如何使用异步数据初始化服务并将其注入依赖服务

Question

我在AngularJS中也有类似的情况：使用异步数据初始化服务，但我需要将带有异步数据的基本服务注入到依赖服务中。它看起来像这样：

基地服务：

angular.module('my.app').factory('baseService', baseService);

baseService.$inject = ['$http'];

function baseService($http) {
    var myData = null;

    var promise = $http.get('api/getMyData').success(function (data) {
        myData = data;
    });

    return {
        promise: promise,
        getData: function() {
            return myData;
    }};
}

依赖服务（我在其中注入基础服务）

angular.module('my.app').factory('depentService', depentService);

depentService.$inject = ['baseService'];

function depentService(baseService) {
    var myData = baseService.getData();
    ....

    return {...};
}

路线：

    angular.module('my.app', ["ngRoute"])
    .config(function ($routeProvider) {
        $routeProvider.when('/',
            {
                resolve: {
                    'baseService': function (baseService) {
                        return baseService.promise;
                    }
                }
            });
    });

但是什么也没发生，baseService.getData()仍然返回 null （因为异步 api 调用仍在进行中）。似乎我的 ngRoute 配置无效，但我无法在其中指示任何控制器/模板。如何正确解析我的 baseService 并在 Depend 服务中获取数据？

标签： angularjs

Answer 1

依赖服务应该使用 Promise 并返回 Promise：

angular.module('my.app').factory('depentService', depentService);

depentService.$inject = ['baseService'];

function depentService(baseService) {
    ̶v̶a̶r̶ ̶m̶y̶D̶a̶t̶a̶ ̶=̶ ̶b̶a̶s̶e̶S̶e̶r̶v̶i̶c̶e̶.̶g̶e̶t̶D̶a̶t̶a̶(̶)̶;̶
    var promise = baseService.promise;
    
    var newPromise = promise.then(function(response) {
        var data = response.data;
        //...
        var newData //...
        return newData;
    }); 

    return newPromise;
}

尝试使用原始数据可能会导致依赖服务在主要数据从服务器返回之前运行的竞争条件。

从文档：

该.then方法返回一个新的 Promise，该 Promise 通过 , 的返回值被解析或拒绝successCallback（除非该值是一个 Promise，在这种情况下，它使用在该 Promise 中使用Promise ChainingerrorCallback解析的值来解析）。

— AngularJS $q 服务 API 参考 - Promise API