AngularJS => HTTP 인터셉터

소개

AngularJS의 $ http 서비스를 통해 우리는 백엔드와 통신하고 HTTP 요청을 할 수 있습니다. 모든 요청을 캡처하여 서버에 보내기 전에 조작하려는 경우가 있습니다. 응답을 받기 전에 응답을 캡처하고 처리하기를 원하는 경우도 있습니다. 글로벌 HTTP 오류 처리도 이러한 필요성의 좋은 예가 될 수 있습니다. 인터셉터는 이러한 경우에 정확하게 생성됩니다.

시작하기

Angular의 builtin $http 서비스를 사용하면 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>

'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'는 응용 프로그램에 추가 동작을 추가 할 수있는 가능한 기능을 포함합니다.

http 인터셉터를 사용하여 응답시 플래시 메시지

뷰 파일

기본 HTML (index.html)에는 대개 각도 스크립트 또는 앱에서 공유되는 HTML이 포함되어 있으며 빈 div 요소는 그대로두고 플래시 메시지가 div 요소 내부에 표시됩니다

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

스크립트 파일

각진 모듈의 config 메소드에서 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)의 설정 메소드에 삽입 될 수 있으므로, 각도 모듈의 run 메소드 내부에있는 rootscope에 첨부 된 메소드를 선언하십시오.

또한 $ timeout 내에 메시지를 표시하여 메시지가 임계 값 시간 후에 사라지는 flash 속성을 갖도록합니다. 이 예에서 3000ms.

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 인터셉터

수색…

소개