Nie można uzyskać wyników za pomocą $ http angularjs

Question

Próbuję użyć $ http, ale dlaczego zwraca zerowy wynik?

angular.module('myApp') 
.factory('sender', function($http) { 
    var newData = null; 
    $http.get('test.html') 
     .success(function(data) { 
      newData = data; 
      console.log(newData) 
     }) 
     .error(function() { 
      newData = 'error'; 
     }); 
    console.log(newData) 
    return newData 
}) 

Konsola powiedzieć: http://screencast.com/t/vBGkl2sThBd4. Dlaczego moja nowa data jako pierwsza ma wartość zerową, a następnie jest zdefiniowana? Jak zrobić to poprawnie?

Answer 1

Ten kod JavaScript jest asynchroniczny.

console.log(newData) 
return newData 

jest wykonywany przed tym, co wewnątrz success

newData = data; 
console.log(newData) 

więc w raz pierwszy newData jest null (ustawienie to być null)

A kiedy wrócił odpowiedź HTTP (wewnątrz sukces), newData otrzymuje nową wartość.

Jest to bardzo częste w JavaScript, należy wykonać całą pracę wewnątrz success.

Answer 2

Jak powiedział YardenST, $http jest asynchroniczny, więc musisz upewnić się, że wszystkie funkcje lub logiki wyświetlania, które są zależne od danych, które są zwracane przez Twój $http.get(), są odpowiednio obsługiwane. Jednym ze sposobów osiągnięcia tego celu jest skorzystać z „obietnicą”, który $http Powroty:

Plunkr Demo

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

myApp.factory('AvengersService', function ($http) { 

    var AvengersService = { 
     getCast: function() { 
      // $http returns a 'promise' 
      return $http.get("avengers.json").then(function (response) { 
       return response.data; 
      }); 
     } 
    }; 

    return AvengersService; 
}); 


myApp.controller('AvengersCtrl', function($scope, $http, $log, AvengersService) { 
    // Assign service to scope if you'd like to be able call it from your view also 
    $scope.avengers = AvengersService; 

    // Call the async method and then do stuff with what is returned inside the function 
    AvengersService.getCast().then(function (asyncCastData) { 
      $scope.avengers.cast = asyncCastData; 
    }); 

    // We can also use $watch to keep an eye out for when $scope.avengers.cast gets populated 
    $scope.$watch('avengers.cast', function (cast) { 
     // When $scope.avengers.cast has data, then run these functions 
     if (angular.isDefined(cast)) {   
      $log.info("$scope.avengers.cast has data"); 
     } 
    }); 
});