在 AngularJS 1.5.0 中的 $http.get() 中获取空返回结果答案

【问题标题】：Getting empty return result in $http.get() in AngularJS 1.5.0在 AngularJS 1.5.0 中的 $http.get() 中获取空返回结果
【发布时间】：2016-07-09 00:09:57
【问题描述】：

我在我的 AngularJS 应用程序中创建了一个工厂，用于在对列表的一个或多个元素执行删除后从服务器引入刷新的数据。

var myApp = angular.module('app');
myApp.factory('mvListRefresher', function($http) {
    return {
        refreshCourses : function() {
            var list = new Array();
            $http.get('/api/courses').then(function(response) {
                console.log('got refreshed lists');
                console.log(response.data);
                list = response.data;
            }, function(error) {
                console.log('error in retreiving fresh lists');
                console.log(error);
            });

            console.log('Displaying list of courses');
            console.log(list);
            if(list.length != 0) {
                return list;
            }
        }
    }
});

我通过调用在我的一个控制器中调用这个工厂

$scope.courses = mvListRefresher.refreshCourses();

但我得到一个空列表，即我根本没有得到任何返回值。在我的工厂函数中，我观察到这条线

console.log(list);

总是打印出一个空数组，但是行

console.log(response.data);

在成功回调中正确打印出完整的对象列表。我不知道这是怎么回事。我对 AngularJS 的承诺相对较新，它是异步方法和架构。请帮帮我。如果您需要更多信息，我会提供。我已经使用 MEAN 完成了整个应用程序。提前致谢！

【问题讨论】：

标签： javascript angularjs node.js mean-stack

【解决方案1】：

$http 请求本质上是异步的，因此在您返回 list 时，请求尚未完成。您可以在此回复中阅读有关 JavaScript 中异步性的一般概念的更多信息：https://stackoverflow.com/a/14220323/704894

你应该做的是返回一个 Promise of list：

myApp.factory('mvListRefresher', function($http) {
    return {
        refreshCourses: function() {
            return $http.get('/api/courses').then(function(response) {
                return response.data;
            });
        }
    };
});

$http 方法返回结果的承诺。那么你可以通过以下方式使用这个函数：

mvListRefresher.refreshCourses().then(function (list) {
    $scope.courses = list;
});

您可以在$http documentation 中了解更多信息。

【讨论】：