AngularJS
Demande $ http

Utiliser $ http dans un contrôleur

Le service $http est une fonction qui génère une requête HTTP et renvoie une promesse.

Usage général

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

Utilisation à l'intérieur du contrôleur

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

Méthodes de raccourci

$http service $http a également des méthodes de raccourci. Lisez à propos des méthodes http ici

Syntaxe

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

Méthodes de raccourci

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

Utiliser la requête $ http dans un service

Les requêtes HTTP sont largement utilisées de manière répétée sur chaque application Web. Il est donc judicieux d'écrire une méthode pour chaque requête commune, puis de l'utiliser à plusieurs endroits dans l'application.

Créez 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...
        }
    }
})

Le service ci-dessus effectuera une demande d'obtention à l'intérieur du service. Ce sera disponible à tout contrôleur où le service a été injecté.

Utilisation de l'échantillon

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

En utilisant cette approche, nous pouvons maintenant utiliser httpRequestsService.js à tout moment et dans n'importe quel contrôleur.

Calendrier d'une requête $ http

Les requêtes $ http requièrent un temps qui varie selon le serveur, certaines peuvent prendre quelques millisecondes et d'autres peuvent prendre quelques secondes. Souvent, le temps requis pour récupérer les données d'une requête est critique. En supposant que la valeur de réponse est un tableau de noms, considérez l'exemple suivant:

Incorrect

$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'accès à $scope.names[0] juste en dessous de la requête $ http $scope.names[0] souvent une erreur - cette ligne de code s'exécute avant que la réponse ne soit reçue du serveur.

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

En utilisant le service $ watch , nous $scope.names tableau $scope.names uniquement lorsque la réponse est reçue. Lors de l'initialisation, la fonction est appelée même si $scope.names été initialisé auparavant, vérifiant par conséquent si le newVal.length est différent de 0 est nécessaire. Sachez que toute modification apportée à $scope.names déclenchera la fonction watch.