AngularJS => HTTP-interceptor

Introduktion

AngularJS-tjänsten $ http tillåter oss att kommunicera med en backend och göra HTTP-förfrågningar. Det finns fall där vi vill fånga varje begäran och manipulera den innan vi skickar den till servern. Andra gånger vill vi fånga svaret och behandla det innan samtalet slutförs. Global http-felhantering kan också vara ett bra exempel på ett sådant behov. Interceptorer skapas exakt för sådana fall.

Komma igång

Angular's inbyggda $http tjänst tillåter oss att skicka HTTP-förfrågningar. Ofta uppstår behovet av att göra saker före eller efter en förfrågan, till exempel lägga till en verifieringstoken till varje begäran eller skapa en generisk felhanteringslogik.

Generiska httpInterceptor steg för steg

Skapa en HTML-fil med följande innehåll:

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

Lägg till en JavaScript-fil som heter 'app.js':

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

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

Lägg till en annan som heter '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]);
})();

Och slutligen filen som innehåller själva avlyssnaren '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);
})();

"GenericInterceptor" täcker möjliga funktioner som vi kan åsidosätta att lägga till extra beteende till vår applikation.

Flash-meddelande om svar med hjälp av http-interceptor

I visningsfilen

I bashtml (index.html) där vi vanligtvis inkluderar vinkelskript eller html som delas över appen, lämnar ett tomt div-element, blixtmeddelanden visas i detta div-element

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

Skriptfil

I konfigurationsmetoden för vinkelmodul, injicera httpProvider, httpProvider har en egenskap för avlyssningsuppsättningar, tryck på den anpassade avlyssnaren. I det nuvarande exemplet avlyssnar den anpassade avlyssnaren bara svaret och kallar en metod kopplad till 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;
                                    }
                   };
        }]);
        
    }])

Eftersom endast leverantörer kan injiceras i konfigurationsmetoden för en vinkelmodul (det vill säga httpProvider och inte rootcope), förklarar metoden som är kopplad till rootscope i körmetoden för vinkelmodul.

Visa även meddelandet inom $ timeout så att meddelandet har blixtegenskapen, som försvinner efter en tröskeltid. I vårt exempel är det 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)
    }
}]);

Vanliga fallgropar

Försöker du injicera $ rootScope eller andra tjänster i config- metoden för vinkelmodul, tillåter livscykeln för vinkelapp inte det och okänt leverantörsfel kommer att kastas. Endast leverantörer kan injiceras i konfigurationsmetoden för vinkelmodulen

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

AngularJS
HTTP-interceptor

Sök…