본문 바로가기

Programming/Angular

[Angular] HTTPInterceptor 를 이용하여 파일 업로드 중지하기

반응형
안녕하세요. 명동섞어찌개입니다.
오늘은 Angular 에서 파일 업로드 기능 개발 시, 원하는 시점에 파일 업로드를 중지하는 기능에 대해 알아보도록 하겠습니다.

요점은 페이지 이동이나 파일 업로드 취소 버튼을 누르는 순간, HTTPIntercepter 를 이용하여 서버에 보내는 요청을 취소하여 파일 업로드를 중지하는 기능을 만드는 겁니다!


1. HttpCancelService 를 만듭니다

실질적으로 http 요청을 취소하는 부분입니다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';

@Injectable()
export class HttpCancelService {

private pendingHTTPRequests = new Subject<void>();

constructor() {
}

public cancelPendingRequests() {
this.pendingHTTPRequests.next();
}

public onCancelPendingRequests() {
return this.pendingHTTPRequests.asObservable();
}
}



2. 공통으로 어느 페이지에서나 호출하기 위해서 이벤트를 설정해 줍니다.

이거는 만드는 방식의 차이인데요
저는 어느 페이지에서나 접근 가능한 공통 commonCode 에 페이지 공통으로 쓸 이벤트를 하나 정의해 두었습니다. (이벤트를 쓰는 건 간편하긴 하지만 남발할 경우 ...... 권장하지는 않습니다. 프로젝트 상황에 맞게 쓰세요!)

1
export const COMMON_EVENT = new EventEmitter();



3. HTTPIntercepter 를 만듭니다

위에서 만든 공통 이벤트를 통해 'stop_file_upload' 라는 요청을 보내면 이 Interceptor 가 듣고, httpCancelService 의 함수를 호출해서 http 통신을 취소하게 됩니다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import {Injectable} from '@angular/core';
import {ActivationEnd, Router} from '@angular/router';
import {HttpCancelService} from '../http-cancel.service';
import {HttpEvent, HttpHandler, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import * as commonCode from '../../../shared/config/commonCode';

@Injectable()
export class ManageHttpInterceptor {

CODE = commonCode;

constructor(
router: Router,
private httpCancelService: HttpCancelService
) {
this.CODE.COMMON_EVENT.subscribe( e => {
if(e == 'stop_file_upload') {
this.httpCancelService.cancelPendingRequests();
}
});
}

intercept<T>(req: HttpRequest<T>, next: HttpHandler): Observable<HttpEvent<T>> {
return next.handle(req).pipe(takeUntil(this.httpCancelService.onCancelPendingRequests()));
}
}



4. core.module 에 (1) HttpCancelService 와 (3) HTTPIntercepter 를 세팅합니다

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {NgModule} from '@angular/core';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {HttpCancelService} from './services/http-cancel.service';
import {ManageHttpInterceptor} from './services/interceptor/manage-http.interceptor';

@NgModule({
imports: [
HttpClientModule,
],
providers : [
HttpCancelService,
{
provide: HTTP_INTERCEPTORS,
useClass: ManageHttpInterceptor,
multi: true
},
]
})
export class CoreModule {
}



5. 마지막으로 파일 업로드를 하는 화면에서, 업로드 중지 요청을 보내는 함수를 만듭니다.


1
2
3
4
import * as commonCode from '../../../shared/config/commonCode';

.
.

CODE = commonCode;

.
.

public stopFileUploading() {
//파일업로드중지
this.CODE.COMMON_EVENT.emit('stop_file_upload');
}

이제 언제 어디서든 파일 업로드를 중지해야 하는 상황이 생기면 위와 같이 호출해주시면 됩니다.

(업로드 취소 버튼을 누르거나, 브라우저에서 뒤로 가기를 누르는 등 - Angular 에서 브라우저 뒤로 가기를 눌렀을 때 처리방법 글 참조 )