AngularJS => HTTP-Interceptor

Einführung

Der $ http-Dienst von AngularJS ermöglicht es uns, mit einem Backend zu kommunizieren und HTTP-Anforderungen zu stellen. Es gibt Fälle, in denen wir jede Anfrage erfassen und bearbeiten müssen, bevor sie an den Server gesendet wird. Zu anderen Zeiten möchten wir die Antwort erfassen und bearbeiten, bevor der Anruf abgeschlossen wird. Die globale http-Fehlerbehandlung kann ebenfalls ein gutes Beispiel für ein solches Bedürfnis sein. Abfangjäger werden genau für solche Fälle erstellt.

Fertig machen

Der integrierte $http Dienst von Angular ermöglicht das Senden von HTTP-Anforderungen. Oft besteht die Notwendigkeit, vor oder nach einer Anforderung etwas zu tun, z. B. zu jeder Anforderung ein Authentifizierungstoken hinzuzufügen oder eine generische Fehlerbehandlungslogik zu erstellen.

Generischer httpInterceptor Schritt für Schritt

Erstellen Sie eine HTML-Datei mit folgendem Inhalt:

<!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>

Fügen Sie eine JavaScript-Datei mit dem Namen 'app.js' hinzu:

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

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

Fügen Sie eine weitere mit dem Namen 'appController.js' hinzu:

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

Und schließlich die Datei, die den Interceptor selbst enthält: "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);
})();

Der 'genericInterceptor' umfasst die möglichen Funktionen, die wir außer Kraft setzen können, um der Anwendung zusätzliches Verhalten hinzuzufügen.

Flash-Nachricht bei Antwort mit http-Interceptor

In der Ansichtsdatei

Lassen Sie ein leeres div-Element in der Basis-HTML (index.html), in der wir normalerweise die Winkelskripte oder die in der App freigegebene HTML-Datei einschließen, die Flash-Nachrichten in diesem div-Element

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

Skriptdatei

Fügen Sie in der config-Methode des Winkelmoduls den httpProvider ein, der httpProvider verfügt über eine Interceptor-Array-Eigenschaft. Drücken Sie den benutzerdefinierten Interceptor. Im aktuellen Beispiel fängt der benutzerdefinierte Interceptor nur die Antwort ab und ruft eine an rootScope angehängte Methode auf.

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

Da nur Provider in die config-Methode eines Winkelmoduls eingefügt werden können (dh httpProvider und nicht der rootscope), müssen Sie die an rootscope angehängte Methode innerhalb der run-Methode des angle-Moduls deklarieren.

Zeigen Sie die Nachricht auch innerhalb von $ timeout an, damit die Nachricht die Flash-Eigenschaft besitzt, die nach einer Schwellenzeit verschwindet. In unserem Beispiel sind es 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)
    }
}]);

Häufige Fehler

Beim Versuch, $ rootScope oder andere Dienste in die config- Methode des Winkelmoduls einzuspeisen, lässt der Lebenszyklus der Winkel-App dies nicht zu, und ein unbekannter Anbieterfehler wird ausgelöst. In der config- Methode des Winkelmoduls können nur Provider eingefügt werden

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

AngularJS
HTTP-Interceptor

Suche…