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

Question

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

Answer 1

我相信您可以使用以下模式制定依赖 promise 解决方案，其中 setData 链将在 .main 中完成，并在我们解析 getData< 时得到满足 在 .main.app 中。无需在 .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();
        }]
    }
});