wake-up-neo.net

Wie verwende ich HTTP.GET richtig in AngularJS? Insbesondere für einen externen API-Aufruf?

Ich habe den folgenden Code in der controller.js, 

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

myApp.service('dataService', function($http) {
delete $http.defaults.headers.common['X-Requested-With'];
this.getData = function() {
    $http({
        method: 'GET',
        url: 'https://www.example.com/api/v1/page',
        params: 'limit=10, sort_by=created:desc',
        headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
     }).success(function(data){
         return data
    }).error(function(){
        alert("error");
    });
 }
});

myApp.controller('AngularJSCtrl', function($scope, dataService) {
  $scope.data = dataService.getData();
});

Aber ich glaube, ich mache wahrscheinlich einen Fehler in Bezug auf CORS. Können Sie mich bitte auf den richtigen Weg hinweisen, um diesen Anruf zu tätigen? Vielen Dank!

37
Anand Ram

Erstens gibt Ihr success()-Handler nur die Daten zurück. Dies wird jedoch nicht an den Aufrufer von getData() zurückgegeben, da er bereits in einem Rückruf enthalten ist. $http ist ein asynchroner Aufruf, der einen $promise zurückgibt. Sie müssen also einen Rückruf registrieren, wenn die Daten verfügbar sind.

Ich empfehle, in AngularJS nach Versprechungen und die $ q -Bibliothek zu suchen, da dies der beste Weg ist, um asynchrone Aufrufe zwischen Diensten zu übergeben.

Zur Vereinfachung wurde hier derselbe Code mit einem vom aufrufenden Controller bereitgestellten Funktionsrückruf umgeschrieben:

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

myApp.service('dataService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.getData = function(callbackFunc) {
        $http({
            method: 'GET',
            url: 'https://www.example.com/api/v1/page',
            params: 'limit=10, sort_by=created:desc',
            headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
        }).success(function(data){
            // With the data succesfully returned, call our callback
            callbackFunc(data);
        }).error(function(){
            alert("error");
        });
     }
});

myApp.controller('AngularJSCtrl', function($scope, dataService) {
    $scope.data = null;
    dataService.getData(function(dataResponse) {
        $scope.data = dataResponse;
    });
});

Jetzt gibt $http bereits ein $ -Versprechen zurück, so dass dies neu geschrieben werden kann:

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

myApp.service('dataService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.getData = function() {
        // $http() returns a $promise that we can add handlers with .then()
        return $http({
            method: 'GET',
            url: 'https://www.example.com/api/v1/page',
            params: 'limit=10, sort_by=created:desc',
            headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
         });
     }
});

myApp.controller('AngularJSCtrl', function($scope, dataService) {
    $scope.data = null;
    dataService.getData().then(function(dataResponse) {
        $scope.data = dataResponse;
    });
});

Schließlich gibt es bessere Möglichkeiten, den $http-Dienst so zu konfigurieren, dass er die Header für Sie verwendet. Verwenden Sie config(), um den $httpProvider einzurichten. Überprüfen Sie die $ http-Dokumentation für Beispiele.

77
Kevin Stone

Ich schlage vor, Sie verwenden Versprechen

myApp.service('dataService', function($http,$q) {

  delete $http.defaults.headers.common['X-Requested-With'];
  this.getData = function() {
     deferred = $q.defer();
     $http({
         method: 'GET',
         url: 'https://www.example.com/api/v1/page',
         params: 'limit=10, sort_by=created:desc',
         headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
     }).success(function(data){
         // With the data succesfully returned, we can resolve promise and we can access it in controller
         deferred.resolve();
     }).error(function(){
          alert("error");
          //let the function caller know the error
          deferred.reject(error);
     });
     return deferred.promise;
  }
});

in Ihrem Controller können Sie die Methode verwenden

myApp.controller('AngularJSCtrl', function($scope, dataService) {
    $scope.data = null;
    dataService.getData().then(function(response) {
        $scope.data = response;
    });
});

versprechungen sind ein starkes Feature von anglejs und es ist besonders praktisch, wenn Sie das Verschachteln von Rückrufen vermeiden möchten. 

9

Keine Notwendigkeit, mit $ http zu versprechen, ich verwende es nur mit zwei Renditen:

 myApp.service('dataService', function($http) {
   this.getData = function() {
      return $http({
          method: 'GET',
          url: 'https://www.example.com/api/v1/page',
          params: 'limit=10, sort_by=created:desc',
          headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
      }).success(function(data){
        return data;
      }).error(function(){
         alert("error");
         return null ;
      });
   }
 });

Im Controller 

 myApp.controller('AngularJSCtrl', function($scope, dataService) {
     $scope.data = null;
     dataService.getData().then(function(response) {
         $scope.data = response;
     });
 }); 
3
AlainIb

Versuche dies

myApp.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
]);

Die Einstellung useXDomain = true reicht nicht aus. AJAX -Anfragen werden auch mit dem X-Requested-With-Header gesendet, der sie als AJAX anzeigt. Das Entfernen des Headers ist erforderlich, damit der Server die eingehende Anforderung nicht ablehnt.

2
ShibinRagh

Sie müssen also das nutzen, was wir Versprechen nennen. Lesen Sie hier, wie Winkel damit umgeht, https://docs.angularjs.org/api/ng/service/ $ q. Wendet unsere $ http-Unterstützungsversprechen inhärent, so dass wir in Ihrem Fall so etwas tun,

(function() {
  "use strict";
  var serviceCallJson = function($http) {

      this.getCustomers = function() {
        // http method anyways returns promise so you can catch it in calling function
        return $http({
            method : 'get',
            url : '../viewersData/userPwdPair.json'
          });
      }

  }

  var validateIn = function (serviceCallJson, $q) {

      this.called = function(username, password) {
          var deferred = $q.defer(); 
          serviceCallJson.getCustomers().then( 
            function( returnedData ) {
              console.log(returnedData); // you should get output here this is a success handler
              var i = 0;
              angular.forEach(returnedData, function(value, key){
                while (i < 10) {
                  if(value[i].username == username) {
                    if(value[i].password == password) {
                     alert("Logged In");
                    }
                  }
                  i = i + 1;
                }
              });
            }, 
            function() {

              // this is error handler
            } 
          );
          return deferred.promise;  
      }

  }

  angular.module('assignment1App')
    .service ('serviceCallJson', serviceCallJson)

  angular.module('assignment1App')
  .service ('validateIn', ['serviceCallJson', validateIn])

}())
1
kishanio

Verwenden Sie Google Finance als Beispiel, um den letzten Schlusskurs des Tickers sowie das aktualisierte Datum und die aktuelle Uhrzeit abzurufen. Sie können YouTiming.com für die Ausführung der Laufzeit besuchen.

Der Service:

MyApp.service('getData', 
  [
    '$http',
    function($http) {

      this.getQuote = function(ticker) {
        var _url = 'https://www.google.com/finance/info?q=' + ticker;
        return $http.get(_url); //Simply return the promise to the caller
      };
    }
  ]
);

Der Controller:

MyApp.controller('StockREST', 
  [
    '$scope',
    'getData', //<-- the service above
    function($scope, getData) {
      var getQuote = function(symbol) {
        getData.getQuote(symbol)
        .success(function(response, status, headers, config) {
          var _data = response.substring(4, response.length);
          var _json = JSON.parse(_data);
          $scope.stockQuoteData = _json[0];
          // ticker: $scope.stockQuoteData.t
          // last price: $scope.stockQuoteData.l
          // last updated time: $scope.stockQuoteData.ltt, such as "7:59PM EDT"
          // last updated date & time: $scope.stockQuoteData.lt, such as "Sep 29, 7:59PM EDT"
        })
        .error(function(response, status, headers, config) {
          console.log('@@@ Error: in retrieving Google Finance stock quote, ticker = ' + symbol);
        });
      };

      getQuote($scope.ticker.tick.name); //Initialize
      $scope.getQuote = getQuote; //as defined above
    }
  ]
);

Das HTML:

<span>{{stockQuoteData.l}}, {{stockQuoteData.lt}}</span>

Oben auf der YouTiming.com-Startseite habe ich die Hinweise zum Deaktivieren der CORS-Richtlinie in Chrome und Safari angebracht.

1
Daniel C. Deng

Wenn Sie ein in einem Service oder in einer Fabrik definiertes Versprechen anrufen, stellen Sie sicher, dass Sie den Service verwenden, da ich keine Antwort von einem in einer Fabrik definierten Versprechen erhalten konnte. So nenne ich ein in einem Service definiertes Versprechen. 

myApp.service('serverOperations', function($http) {
        this.get_data = function(user) {
          return $http.post('http://localhost/serverOperations.php?action=get_data', user);
        };
})


myApp.controller('loginCtrl', function($http, $q, serverOperations, user) {        
    serverOperations.get_data(user)
        .then( function(response) {
            console.log(response.data);
            }
        );
})
0
Lukáš Černý