如何讓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; 
    }); 
};