AngularJS
$ http verzoek

$ Http gebruiken in een controller

De $http service is een functie die een HTTP-verzoek genereert en een belofte retourneert.

Algemeen gebruik

// 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.
  });

Gebruik in 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.
    });
}])

Methoden voor snelkoppelingen

$http service $http heeft ook snelkoppelingsmethoden. Lees hier meer over http-methoden

Syntaxis

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

Methoden voor snelkoppelingen

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

$ Http-verzoek gebruiken in een service

HTTP-verzoeken worden op grote schaal herhaaldelijk gebruikt in elke web-app, dus het is verstandig om een methode te schrijven voor elk gemeenschappelijk verzoek en deze vervolgens op meerdere plaatsen in de app te gebruiken.

Maak een 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...
        }
    }
})

De bovenstaande service voert een get-aanvraag uit binnen de service. Dit is beschikbaar voor elke controller waar de service is geïnjecteerd.

Voorbeeld gebruik

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
            })
    }])

Met deze aanpak kunnen we httpRequestsService.js nu altijd en in elke controller gebruiken.

Timing van een $ http-verzoek

De $ http-aanvragen hebben tijd nodig die varieert afhankelijk van de server, sommige kunnen enkele milliseconden duren en sommige kunnen enkele seconden duren. Vaak is de tijd die nodig is om de gegevens van een verzoek op te halen van cruciaal belang. Ervan uitgaande dat de antwoordwaarde een reeks namen is, overweeg dan het volgende voorbeeld:

Niet correct

$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]);

Toegang tot $scope.names[0] direct onder het $ http-verzoek $scope.names[0] vaak een fout op - deze regel code wordt uitgevoerd voordat het antwoord van de server wordt ontvangen.

Correct

$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);
        });

Met de $ watch- service hebben we alleen toegang tot de $scope.names array als het antwoord is ontvangen. Tijdens de initialisatie wordt de functie aangeroepen, hoewel $scope.names al $scope.names is geïnitialiseerd. Daarom is controleren of de newVal.length anders is dan 0 nodig is. Let op: wijzigingen in $scope.names activeren de watch-functie.