AngularJS
$ http-Anfrage

$ Http in einem Controller verwenden

Der $http Dienst ist eine Funktion, die eine HTTP-Anforderung generiert und ein Versprechen zurückgibt.

Allgemeine Verwendung

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Verwendung im Controller

appName.controller('controllerName',
    ['$http', function($http){

    // Simple GET request example:
    $http({
        method: 'GET',
        url: '/someUrl'
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });
}])

Verknüpfungsmethoden

$http Dienst verfügt auch über Verknüpfungsmethoden. Lesen Sie hier die http-Methoden

Syntax

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

Verknüpfungsmethoden

• $ http.get
• $ http.head
• $ http.post
• $ http.put
• $ http.delete
• $ http.jsonp
• $ http.patch

$ Http-Anfrage in einem Dienst verwenden

HTTP-Anforderungen werden in allen Webanwendungen häufig verwendet. Daher ist es ratsam, für jede allgemeine Anforderung eine Methode zu schreiben und sie an mehreren Stellen in der App zu verwenden.

Erstellen Sie eine httpRequestsService.js

httpRequestsService.js

appName.service('httpRequestsService', function($q, $http){

    return {
        // function that performs a basic get request
        getName: function(){
            // make sure $http is injected
            return $http.get("/someAPI/names")
                .then(function(response) {
                    // return the result as a promise
                    return response;
                }, function(response) {
                    // defer the promise
                    return $q.reject(response.data);
                });
        },

        // add functions for other requests made by your app
        addName: function(){
            // some code...
        }
    }
})

Der obige Dienst führt eine Abrufanforderung innerhalb des Dienstes aus. Dies steht allen Controllern zur Verfügung, in die der Service injiziert wurde.

Verwendungsbeispiel

appName.controller('controllerName',
    ['httpRequestsService', function(httpRequestsService){

        // we injected httpRequestsService service on this controller
        // that made the getName() function available to use.
        httpRequestsService.getName()
            .then(function(response){
                // success
            }, function(error){
                // do something with the error
            })
    }])

Mit diesem Ansatz können wir nun httpRequestsService.js jederzeit und in jedem Controller verwenden.

Zeitpunkt einer $ http-Anfrage

Die $ http-Anforderungen erfordern eine Zeit, die je nach Server unterschiedlich ist. Einige dauern einige Millisekunden, andere einige Sekunden. Oft ist die Zeit, die zum Abrufen der Daten aus einer Anforderung erforderlich ist, kritisch. Angenommen, der Antwortwert ist ein Array von Namen, betrachten Sie das folgende Beispiel:

Falsch

$scope.names = [];

$http({
    method: 'GET',
    url: '/someURL'
}).then(function successCallback(response) {
            $scope.names = response.data;
        },
        function errorCallback(response) {
            alert(response.status);
        });

alert("The first name is: " + $scope.names[0]);

Beim Zugriff auf $scope.names[0] direkt unter der $ http-Anforderung wird häufig ein Fehler $scope.names[0] Diese Codezeile wird ausgeführt, bevor die Antwort vom Server empfangen wird.

Richtig

$scope.names = [];

$scope.$watch('names', function(newVal, oldVal) {
    if(!(newVal.length == 0)) {
        alert("The first name is: " + $scope.names[0]);
    }
});

$http({
    method: 'GET',
    url: '/someURL'
}).then(function successCallback(response) {
            $scope.names = response.data;
        },
        function errorCallback(response) {
            alert(response.status);
        });

Mit dem $ watch- Dienst greifen wir nur dann auf das Array $scope.names wenn die Antwort empfangen wird. Während der Initialisierung wird die Funktion auch dann aufgerufen, wenn $scope.names zuvor initialisiert wurde. Daher muss geprüft werden, ob newVal.length 0 newVal.length . Seien Sie sich bewusst - alle Änderungen, die Sie an $scope.names , lösen die $scope.names .