AngularJS => HTTP-onderschepper

Invoering

Met de $ http-service van AngularJS kunnen we communiceren met een backend en HTTP-aanvragen doen. Er zijn gevallen waarin we elk verzoek willen vastleggen en manipuleren voordat we het naar de server verzenden. Andere keren willen we het antwoord vastleggen en verwerken voordat we de oproep voltooien. Globale http-foutafhandeling kan ook een goed voorbeeld zijn van een dergelijke behoefte. Onderscheppers worden precies voor dergelijke gevallen gemaakt.

Ermee beginnen

Met de ingebouwde $http service van Angular kunnen we HTTP-aanvragen verzenden. Vaak is het nodig om dingen voor of na een verzoek te doen, bijvoorbeeld aan elk verzoek een authenticatietoken toevoegen of een generieke logica voor foutafhandeling maken.

Generieke httpInterceptor stap voor stap

Maak een HTML-bestand met de volgende inhoud:

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

Voeg een JavaScript-bestand met de naam 'app.js' toe:

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

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

Voeg nog een toe met de naam '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]);
})();

En tot slot het bestand met de interceptor zelf '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);
})();

De 'generiekeInterceptor' behandelt de mogelijke functies die we kunnen opheffen door extra gedrag aan onze applicatie toe te voegen.

Flitsbericht bij reactie met http-interceptor

In het weergavebestand

In de basishtml (index.html) waar we meestal de hoekige scripts of de html opnemen die in de app wordt gedeeld, laat een leeg div-element achter, de flash-berichten verschijnen binnen dit div-element

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

Script bestand

Injecteer in de configuratiemethode van de hoekmodule de httpProvider, de httpProvider heeft een interceptor-array-eigenschap, duwt de aangepaste interceptor, in het huidige voorbeeld onderschept de aangepaste interceptor alleen de reactie en roept deze een methode aan die is gekoppeld aan 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;
                                    }
                   };
        }]);
        
    }])

Aangezien alleen providers kunnen worden geïnjecteerd in de configuratiemethode van een hoekmodule (dat wil zeggen httpProvider en niet de rootscope), geeft u de methode aan die is gekoppeld aan rootscope in de run-methode van de hoekmodule.

Geef het bericht ook weer binnen $ time-out zodat het bericht de eigenschap flash heeft, die na een drempeltijd verdwijnt. In ons voorbeeld is het 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)
    }
}]);

Veel voorkomende valkuilen

Probeert $ rootScope of andere services in de configuratiemethode van de hoekmodule te injecteren, de levenscyclus van de hoekige app staat dat niet toe en een onbekende providerfout wordt gegenereerd. Alleen providers kunnen worden geïnjecteerd in de configuratiemethode van de hoekmodule

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

AngularJS
HTTP-onderschepper

Zoeken…