AngularJS
$ http-begäran

Använda $ http i en kontroller

Tjänsten $http är en funktion som genererar en HTTP-begäran och ger ett löfte.

Allmän användning

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

Användning inuti styrenheten

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

Genvägsmetoder

Tjänsten $http har också genvägsmetoder. Läs om http-metoder här

Syntax

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

Genvägsmetoder

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

Använda $ http-förfrågan i en tjänst

HTTP-förfrågningar används ofta flera gånger i varje webbapp, så det är klokt att skriva en metod för varje gemensam begäran och sedan använda den på flera platser i hela appen.

Skapa en 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...
        }
    }
})

Tjänsten ovan utför en begäran om få inuti tjänsten. Detta kommer att vara tillgängligt för alla styrenheter där tjänsten har injicerats.

Exempel på användning

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

Med hjälp av denna metod kan vi nu använda httpRequestsService.js när som helst och i valfri controller.

Tidpunkt för en $ http-begäran

$ Http-förfrågningarna kräver tid som varierar beroende på servern, vissa kan ta några millisekunder och andra kan ta upp till några sekunder. Ofta är den tid som krävs för att hämta data från en begäran avgörande. Antag att svarvärdet är ett antal namn, tänk på följande exempel:

Felaktig

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

Att komma åt $scope.names[0] strax under $ http-förfrågan kommer ofta att kasta ett fel - den här kodraden körs innan svaret tas emot från servern.

Korrekt

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

Med $ watch- tjänsten får vi bara tillgång $scope.names när svaret mottas. Under initieringen kallas funktionen trots att $scope.names initierades tidigare, varför det är nödvändigt att kontrollera om newVal.length är annorlunda än 0. Var medveten - alla ändringar som gjorts i $scope.names utlöser $scope.names .