javascript - 如何让 Javascript 在继续之前等待异步调用？

Question

我有一个工厂，它可以到服务器获取一些引用数据。

问题是下面的http get调用是异步的，所以一旦调用它，它就会转到下一行。因此，使用下面的代码，它将返回 null 数据，因为当 http 调用完成并且我的回调开始复制到数据变量时，它已经退出了该方法。

如何让它等到回调函数运行后再继续下一行？

顺便说一句，我在这里使用 Angular。

app.factory('referenceDataFactory', ['$http', function ($http) {
    var factory = [];

    factory.getSports = function () {

        var data;
        $http.get('/Home/GetSports').success(
            function (obj) {
                data = obj;
            });

        return data;    


        // return [{ id: 1, name: 'Volleyball' }, { id: 2, name: 'Football' }, { id: 3, name: 'Tennis' }, { id: 4, name: 'Badminton' }];
    }


    return factory;

}]);

Answer 1

AngularJs 中的 http API 将返回 promise 。您应该返回整个 promise ，并在调用“getSports”的函数中的“成功”回调中编写代码。

这是一个example .

var app = angular.module('myApp', []);

app.factory('referenceDataFactory', ['$http', function ($http) {
    var factory = [];
    factory.getSports = function () {
        return $http.get('/echo/js/?delay=6&js="test"')
    }

    return factory;
}]);

function HelloCtrl($scope, referenceDataFactory) {
    referenceDataFactory.getSports().success(function (result) {
        $scope.fromFactory = result;
    });
};