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

Question

我在我的 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;
            }
        }
    }
});

我通过调用在我的一个 Controller 中调用这个工厂

$scope.courses = mvListRefresher.refreshCourses();

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

console.log(list);

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

console.log(response.data);

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

Answer 1

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

您应该做的是返回列表的 Promise:

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

$http 方法返回结果 promise 。然后你可以通过以下方式使用这个函数:

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

您可以在 $http documentation 中阅读更多相关信息.