Return http data from Angular service

后端 未结 2 1735
南方客
南方客 2021-01-19 16:43

I\'m sure this will be an easy one for any Angular/Javascript experts. I have a service that makes a call to an API to get some data:

app.service(\"GetDivisi         


        
相关标签:
2条回答
  • 2021-01-19 17:28

    You need to understand that you can't return from asynchronous operations. Response is simply not yet available when you try to return data. Typically in Javascript you would use callback or promise pattern. In Angular promise is a very natural choice.

    app.service("GetDivision", ["$http", function($http) {
      this.division = function(divisionNumber){
        return $http.post("/api/division", {division:divisionNumber}).success(function(data){
          return data;
        });
      }
    }]);
    

    and in controller:

    GetDivision.division(1).then(function(data) {
        $scope.division = data;
    });
    

    Make sure you read this very popular thread on the subject: How do I return the response from an asynchronous call?

    0 讨论(0)
  • 2021-01-19 17:43

    You can return empty object from your service and populate it once you receive the response. That is the way $resource service do it. It also allows to avoid additional logic in controller.

    This will work because reference to data object that is put into the scope remains the same all the time and $http service starts digest cycle once response is returned. Therefore the change in the scope.division will be immediately detected and view will be updated accordingly.

    JavaScript

    var app = angular.module('app',[]);
    
    app.service("GetDivision", ["$http", function($http){
    
      var data = {};
    
      this.division = function(divisionNumber){
        $http.get("division", {division:divisionNumber}).success(function(responseData){
          angular.extend(data, responseData);
        });
        return data;
      } 
    
    }]);
    
    app.controller('ctrl', ['$scope', 'GetDivision', function ($scope, GetDivision) {
      $scope.division = GetDivision.division(1);
    }]);
    

    HTML

    <body ng-controller="ctrl">
      <h1>{{division.text}}</h1>
    </body>
    

    Live Demo: http://plnkr.co/edit/H31mSaXiiCiVG9BA9aHK?p=preview

    0 讨论(0)
提交回复
热议问题