AngularJS => Intercepteur HTTP

Introduction

Le service $ http d'AngularJS nous permet de communiquer avec un backend et de faire des requêtes HTTP. Il y a des cas où nous voulons capturer chaque demande et la manipuler avant de l'envoyer au serveur. D'autres fois, nous aimerions capturer la réponse et la traiter avant de terminer l'appel. Le traitement global des erreurs http peut aussi être un bon exemple de ce besoin. Les intercepteurs sont créés exactement pour de tels cas.

Commencer

Le service intégré $http Angular nous permet d'envoyer des requêtes HTTP. Souvent, il est nécessaire de faire des choses avant ou après une requête, par exemple en ajoutant à chaque requête un jeton d'authentification ou en créant une logique de traitement d'erreur générique.

HttpInterceptor générique pas à pas

Créez un fichier HTML avec le contenu suivant:

<!DOCTYPE html>
<html>
<head>
  <title>Angular Interceptor Sample</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
  <script src="app.js"></script>
  <script src="appController.js"></script>
  <script src="genericInterceptor.js"></script>
</head>
<body ng-app="interceptorApp">
    <div ng-controller="appController as vm">
        <button ng-click="vm.sendRequest()">Send a request</button>
    </div>
</body>
</html>

Ajoutez un fichier JavaScript appelé "app.js":

var interceptorApp = angular.module('interceptorApp', []);

interceptorApp.config(function($httpProvider) {
        $httpProvider.interceptors.push('genericInterceptor');
});

Ajoutez-en un autre appelé 'appController.js':

(function() {
    'use strict';

    function appController($http) {
        var vm = this;

        vm.sendRequest = function(){
            $http.get('http://google.com').then(function(response){
                console.log(response);
            });
        };
    }

    angular.module('interceptorApp').controller('appController',['$http', appController]);
})();

Et enfin le fichier contenant l'intercepteur lui-même 'genericInterceptor.js':

(function() {
    "use strict";

    function genericInterceptor($q) {
        this.responseError = function (response) {
            return $q.reject(response);
        };

        this.requestError = function(request){
            if (canRecover(rejection)) {
                return responseOrNewPromise
            }
            return $q.reject(rejection);
        };

        this.response = function(response){
            return response;
        };

        this.request = function(config){
            return config;
        }
    } 

    angular.module('interceptorApp').service('genericInterceptor', genericInterceptor);
})();

Le 'genericInterceptor' couvre les fonctions possibles que nous pouvons remplacer en ajoutant un comportement supplémentaire à notre application.

Message Flash sur la réponse à l'aide de l'intercepteur http

Dans le fichier de vue

Dans la base html (index.html) où nous incluons généralement les scripts angulaires ou le code HTML partagé dans l'application, laissez un élément div vide, les messages flash apparaîtront à l'intérieur de cet élément div

<div class="flashmessage" ng-if="isVisible">
    {{flashMessage}}
</div>

Fichier de script

Dans la méthode de configuration du module angulaire, injectez le httpProvider, le httpProvider possède une propriété de tableau d'intercepteur, poussez l'intercepteur personnalisé. Dans l'exemple actuel, l'intercepteur personnalisé intercepte uniquement la réponse et appelle une méthode attachée à rootScope.

var interceptorTest = angular.module('interceptorTest', []);
    
    interceptorTest.config(['$httpProvider',function ($httpProvider) {

        $httpProvider.interceptors.push(["$rootScope",function ($rootScope) {
            return {     //intercept only the response
                        'response': function (response) 
                                    {
                                      $rootScope.showFeedBack(response.status,response.data.message);
                           
                                      return response;
                                    }
                   };
        }]);
        
    }])

Comme seuls les fournisseurs peuvent être injectés dans la méthode de configuration d'un module angulaire (c'est-à-dire httpProvider et non rootscope), déclarez la méthode associée à rootscope dans la méthode run du module angulaire.

Affichez également le message dans $ timeout afin que le message ait la propriété flash, qui disparaît après une heure limite. Dans notre exemple, ses 3000 ms.

interceptorTest.run(["$rootScope","$timeout",function($rootScope,$timeout){
     $rootScope.showFeedBack = function(status,message){
        
        $rootScope.isVisible = true;
        $rootScope.flashMessage = message;
        $timeout(function(){$rootScope.isVisible = false },3000)
    }
}]);

Pièges communs

En essayant d’injecter $ rootScope ou tout autre service dans la méthode de configuration du module angulaire, le cycle de vie de l’application angulaire ne le permet pas et une erreur de fournisseur inconnu sera générée. Seuls les fournisseurs peuvent être injectés dans la méthode de configuration du module angulaire

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

AngularJS
Intercepteur HTTP

Recherche…