如何让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

http API将在AngularJs中返回一个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; 
    }); 
};