AngularJS => Interceptor HTTP

Wprowadzenie

Usługa $ http AngularJS pozwala nam komunikować się z backendem i wysyłać żądania HTTP. Są przypadki, w których chcemy przechwycić każde żądanie i manipulować nim przed wysłaniem go na serwer. Innym razem chcielibyśmy uchwycić odpowiedź i przetworzyć ją przed zakończeniem połączenia. Globalna obsługa błędów HTTP może być również dobrym przykładem takiej potrzeby. Przechwytywacze są tworzone właśnie dla takich przypadków.

Pierwsze kroki

Wbudowana usługa $http firmy Angular pozwala nam wysyłać żądania HTTP. Często pojawia się potrzeba robienia rzeczy przed lub po żądaniu, na przykład dodanie do każdego żądania tokenu uwierzytelnienia lub stworzenie ogólnej logiki obsługi błędów.

Ogólny httpInterceptor krok po kroku

Utwórz plik HTML o następującej treści:

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

Dodaj plik JavaScript o nazwie „app.js”:

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

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

Dodaj kolejny o nazwie „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]);
})();

I wreszcie plik zawierający sam przechwytywacz „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” obejmuje możliwe funkcje, które możemy zastąpić, dodając dodatkowe zachowanie do naszej aplikacji.

Komunikat Flash w odpowiedzi przy użyciu przechwytywacza HTTP

W pliku widoku

W podstawowym html (index.html), w którym zwykle dołączamy skrypty kątowe lub html, który jest współużytkowany w aplikacji, pozostaw pusty element div, wiadomości flash będą pojawiać się w tym elemencie div

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

Plik skryptu

W metodzie konfiguracji modułu kątowego wstrzyknij httpProvider, httpProvider ma właściwość tablicy przechwytującej, pchnij niestandardowy przechwytujący, W bieżącym przykładzie niestandardowy przechwytujący przechwytuje tylko odpowiedź i wywołuje metodę dołączoną do 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;
                                    }
                   };
        }]);
        
    }])

Ponieważ tylko dostawcy mogą być wprowadzani do metody konfiguracji modułu kątowego (tj. HttpProvider, a nie rootscope), zadeklaruj metodę dołączoną do rootscope wewnątrz metody uruchamiania modułu kątowego.

Wyświetlaj także komunikat w ciągu $ timeout, aby wiadomość miała właściwość flash, która znika po upływie progu. W naszym przykładzie jest to 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)
    }
}]);

Częste pułapki

Podczas próby wstrzyknięcia $ rootScope lub jakichkolwiek innych usług w ramach metody konfiguracji modułu kątowego, cykl życia aplikacji kątowej nie pozwala na to i zostanie zgłoszony błąd nieznanego dostawcy. Tylko dostawcy mogą być wprowadzani metodą konfiguracji modułu kątowego

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

AngularJS
Interceptor HTTP

Szukaj…