在config被执行之前，等待async调用

Wait for async call on run before config is executed (Angular JS)

本文关键字：等待 async 调用 config 执行      更新时间：2023-09-26

我需要在加载任何状态之前解析http调用

angular.module('myModule', [])
    .run(function($http, MyFactory) {
        $http.get('/api..')
           .success(function(data){
                MyFactory.setData(data);
                //Store data in a service
            });
    })
    .config(function($stateProvider) {
        $stateProvider
        .state('main', {...})
        .state('main.app'{
            url: '/app'
            resolve: {
               data: function(MyFactory) {
                  MyFactory.getData();
                // This block needs to be run after my $http call in 'run' has been resolved.
                return ..
               } 
            }
         }
     });

.factory('MyFactory', function () {
     var data = '';
     return {
        setData: function(_data) {
           data = _data
        },
        getData: function() {
           return data;
        }
     } 
};

我试图把$http作为我的第一个状态.main的解析，但如果你直接去.main.app，第一个解析在第二个之后执行。

我相信您可以使用以下模式来制作依赖承诺解析，其中setData链将在.main中完成，并且当我们在.main.app中解决getData时将得到满足。在.run()中不需要这样做，相反，下面是对我认为您想要完成的内容的简单解释…

.factory('MyFactory', function($http, $q) {
    function setData() {
        var deferred = $q.defer();
        $http.get('/endpoint').success(function(response) {
            // do something with data - we just want to resolve the response so this block is executed
            deferred.resolve(response)
        });
        return deferred.promise;
    }
    function getData() {
        return $http.get('/endpoint');
    }
    return {
        getData: 'getData',
        storeData: 'storeData'
    }
});

.state('main', {
    resolve : {
        set: ['MyFactory', function(MyFactory) {
            return MyFactory.setData();
        }]
    }
})
.state('main.app', {
    resolve: {
        data: ['set', 'MyFactory', function(saved, MyFactory) {
            // -- set must be resolved
            return MyFactory.getData();
        }]
    }
});
相关文章：