[AngularJS] $http 인터셉터에 대해서

[AngularJS] $http 인터셉터

1. 인터셉터가 필요한 이유

 원격 서버를 호출할 때마다 또는 서버로부터 응답을 받을 때마다 특정한 행동을 수행해야 할 필요가 있다고 생각해보자. 예를 들어, 목적지 URL에 인증 토큰을 URL 매개변수에 추가해야 한다고 가정해보자. 물론 모든 모델의 URL을 필요에 맞게 수정해도 되겠지만, 서비스의 개수가 엄청나다면 이 일 또한 쉬운 일은 아닐 것이다. 어느 한 곳만 변경하면 외부로 나가는 모든 호출에 이 사항이 적용될 수 있다면 멋지지 않겠는가? 어느 한 부분에서 외부로 나가거나 혹은 외부로부터 들어오는 서비스 호출을 가로채서 필요한 로직을 수행할 수 있다면 편리하지 않을까?

2. 인터셉터의 활용

 이번에는 외부의 원격 서버를 호출할 때 로딩 중 표시가 나타나게 하고, 호출이 완료되면 표시가 사라지도록 하는 방법을 확인해보자. 우선, 인터셉터를 구현해야 한다. 이 인터셉터는 loadingInterceptor라는 이름으로 구현하여 LoadingService 서비스에 주입할 예정이다.

myModule.factory('loadingInterceptor', function(LoadingService) {
    var loadingInterceptor = {
        request: function (config) {
            LoadingService.setLoading(true);
            return config;
        },
        response: function (response) {
            LoadingService.setLoading(false);
            return response;
        }
    };
    return loadingInterceptor;
});
 

우리에게 필요한 부분은 request 및 response 호출을 가로채기 위해 loadingInterceptor 팩토리 객체에 관련 메서드를 구현하는 것이다. config 및 response 메서드 내에서는 LoadingService.setLoading(true)와 LoadingService.setLoading(false) 구문을 실행하여 로딩 중 표시가 켜지거나 꺼지게 한다.

이제 인터셉터를 구현했으므로 이 객체를 $httpProvider.interceptors 배열에 다음과 같이 추가해준다.

myModule.config(function ($routeProvider, $httpProvider) {
    //...
 
    //인터셉터
    $httpProvider.interceptors.push('loadingInterceptor');
 
    //...
});

myModule.config 블록에서는 $httpProvider 객체를 주입하여 이 객체의 interceptors 배열에 인터셉터를 추가해야 한다. 일단, $httpProvider 객체에 접근하게 되면 $httpProvider.interceptors.push('loadingInterceptor')와 같이 인터셉터를 추가할 수 있다.