在执行配置之前等待异步调用运行 (Angular JS)

Question

在执行配置之前等待异步调用运行 (Angular JS)

javascripthtmlangularjsangular-ui-router

3

在任何状态加载之前，我需要解决一个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，则会在第二个解析器之后执行第一个解析器。

- Joe

我建议不要从.run函数中调用此函数，而是从工厂本身进行ajax调用，并且执行该ajax的方法将返回一个承诺。因此，该方法将从state的resolve中调用，并从resolve返回该promise。 - Pankaj Parkar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- scniro · Accepted Answer

我相信你可以通过以下模式来构建依赖承诺的解决方案，其中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();
        }]
    }
});