AngularJS => HTTP-перехватчик

Вступление

Служба $ http AngularJS позволяет нам связываться с бэкэнд и делать HTTP-запросы. Есть случаи, когда мы хотим захватить каждый запрос и манипулировать им, прежде чем отправлять его на сервер. В других случаях мы хотели бы зафиксировать ответ и обработать его до завершения вызова. Глобальная обработка ошибок HTTP также может служить хорошим примером такой необходимости. Для таких случаев создаются перехватчики.

Начиная

Встроенная служба $http Angular позволяет отправлять HTTP-запросы. Часто возникает необходимость делать что-либо до или после запроса, например, добавляя к каждому запросу токен аутентификации или создавая общую логику обработки ошибок.

Общий HTTPInterceptor шаг за шагом

Создайте HTML-файл со следующим содержимым:

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

Добавьте файл JavaScript под названием «app.js»:

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

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

Добавьте еще один «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]);
})();

И, наконец, файл, содержащий сам перехватчик '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» охватывает возможные функции, которые мы можем переопределить добавлением дополнительного поведения в наше приложение.

Flash-сообщение с ответом, использующее http-перехватчик

В файле вида

В базовом html (index.html), где мы обычно включаем угловые скрипты или html, которые совместно используются в приложении, оставьте пустой элемент div, флэш-сообщения появятся внутри этого элемента div

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

Файл сценария

В конфигурационном методе углового модуля введите httpProvider, httpProvider имеет свойство массива перехватчика, нажмите пользовательский перехватчик. В текущем примере пользовательский перехватчик перехватывает только ответ и вызывает метод, прикрепленный к 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;
                                    }
                   };
        }]);
        
    }])

Поскольку в конфигурационный метод углового модуля (который является httpProvider, а не корнеплодом) могут быть введены только провайдеры, объявите метод, прикрепленный к корневому методу внутри метода запуска углового модуля.

Также отобразите сообщение внутри $ timeout, чтобы сообщение получило свойство flash, которое исчезает после порогового времени. В нашем примере это 3000 мс.

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

Обычные подводные камни

Пытаясь ввести $ rootScope или любые другие сервисы внутри метода конфигурации углового модуля, жизненный цикл углового приложения не позволяет выбросить эту и неизвестную ошибку поставщика. В конфигурационный метод углового модуля могут быть введены только поставщики

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

AngularJS
HTTP-перехватчик

Поиск…