Javascript 使用angular controller和服务从api发布和获取数据时的承诺序列

我不能把下面的事情分类

• 我有一个有棱角的应用程序
• 这包括一个服务和一个控制器
• 控制器与视图交互，并将服务调用到
  • 获取条目
  • 张贴条目
• 在后台有一个处理数据的api

到目前为止一切都很好，但当我发布一个条目并希望在之后获得所有条目以更新范围时，事情就变得很糟糕了

我认为我的主要问题是事件/承诺的顺序不知何故是错误的，我不知道我做错了什么

也许有人能帮我，因为我现在花了好几个小时在这个问题上，没有任何进展。。我读了很多书，我所读的一切对我来说都是合乎逻辑的。。我还是不能让它工作

我已经为你们创建了一个小提琴，背景中有一个假的api，什么都不做。。。请看一下控制台输出，您可以看到事情发生的顺序是错误的

景色 控制器 谢谢你的阅读。。顺致敬意， uschihund

您可以（应该）摆脱

$q

，使用

$http

返回的承诺。此外，代码将更短：

EntryService.fetchEntries = function(url) {
    return $http.get(url).then(function (response) {
               entries = response.data;
           });
}

EntryService.postEntry = function(url, entry) {
    return $http.post(url, entry);
};

---

您必须嵌套此Promiss才能获得预期结果。您正在执行作为参数发送的函数，而不仅仅是方法指针->。然后（loadEntries（））；使用.then（loadEntries）；相反，@rvalerio你当然是对的，但这并不能解决我的问题。这解决了我描述的编辑：事件的问题，尽管我切换到了q，因为我怀疑序列是错误的。。谢谢你的回复

(function(){
    var app = angular.module('Entry', []);

    app.factory('EntryService', function($http, $q)
    {
        var EntryService = {};

        var deferred = $q.defer();
        var entries = [];

        EntryService.getEntries = function () {
            console.log('get entries');
            return entries;
        };

        EntryService.fetchEntries = function(url)
        {
            $http.get(url)
                .success(function(data) {
                    console.log('fetch entries');
                    entries = data;
                    deferred.resolve();
                })
                .error(function(error) {
                    console.log('Error: Entries could not be fetched');
                    deferred.resolve();
                });

            return deferred.promise;
        };

        EntryService.postEntry = function(url, entry)
        {
            $http.post(url, entry)
                .success(function(data) {
                    console.log('post entry');
                    deferred.resolve();
                })
                .error(function() {
                    console.log('Error: Entry could not be saved.');
                    deferred.resolve();
                });

            return deferred.promise;
        };

        return EntryService;
    });
})();

(function () {
    var app = angular.module('app', ['Entry']);

    app.controller('EntryController', ['$scope', 'EntryService', function ($scope, EntryService) {
        $scope.entryService = EntryService;
        $scope.entries = {};

        loadEntries();

        function loadEntries() {
            $scope.entryService.fetchEntries('/echo/json')
                .then(function(){
                    $scope.entries = $scope.entryService.getEntries();
                });
        }

        $scope.submit = function(ngModel) {
            $scope.entryService.postEntry('/echo/json', {fakeData: 'unimportant'})
                .then(loadEntries());
        }
    }]);
})();

EntryService.fetchEntries = function(url) {
    return $http.get(url).then(function (response) {
               entries = response.data;
           });
}

EntryService.postEntry = function(url, entry) {
    return $http.post(url, entry);
};