AngularJS
$ richiesta http

Usando $ http in un controller

Il servizio $http è una funzione che genera una richiesta HTTP e restituisce una promessa.

Uso generale

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

Utilizzo all'interno del 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.
    });
}])

Metodi di scelta rapida

$http servizio $http ha anche metodi di scelta rapida. Leggi i metodi http qui

Sintassi

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

Metodi di scelta rapida

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

Utilizzo della richiesta $ http in un servizio

Le richieste HTTP sono ampiamente utilizzate ripetutamente in ogni app Web, quindi è consigliabile scrivere un metodo per ogni richiesta comune e quindi utilizzarlo in più punti all'interno dell'app.

Creare un 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...
        }
    }
})

Il servizio di cui sopra eseguirà una richiesta di ottenere all'interno del servizio. Questo sarà disponibile per qualsiasi controller in cui il servizio è stato iniettato.

Esempio di utilizzo

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

Utilizzando questo approccio possiamo ora utilizzare httpRequestsService.js in qualsiasi momento e in qualsiasi controller.

Tempistica di una richiesta $ http

Le richieste $ http richiedono tempi variabili a seconda del server, alcuni possono richiedere alcuni millisecondi e alcuni possono richiedere alcuni secondi. Spesso il tempo richiesto per recuperare i dati da una richiesta è fondamentale. Supponendo che il valore di risposta sia un array di nomi, considera il seguente esempio:

scorretto

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

L'accesso a $scope.names[0] proprio sotto la richiesta $ http genera spesso un errore - questa riga di codice viene eseguita prima che la risposta sia ricevuta dal server.

Corretta

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

Usando il servizio $ watch $scope.names all'array $scope.names solo quando viene ricevuta la risposta. Durante l'inizializzazione, la funzione viene chiamata anche se $scope.names stato inizializzato in precedenza, pertanto è necessario verificare se newVal.length è diverso da 0. Attenzione: qualsiasi modifica apportata a $scope.names attiverà la funzione di visualizzazione.