이것이 모든 Http 요청에 대한 로딩을 보여주기 위해 인터셉터를 구현하는 방법입니다.
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if(myCondition == true)
{
// my loading start showing here
return next.handle(req).pipe(
finalize(() => {
// I hide my loading here
}) );
}
return next.handle(req).pipe(
finalize(() => { }));
}
하지만 내 Http 요청에는 많은 데이터가 있으며 백엔드는 완료하는 데 거의 10 초가 걸립니다.
백엔드 작업이 완료된 후에 만 로딩을 숨기면됩니다.
그러나 위의 코드를 사용하면 백엔드가 완료되기 전에 로딩이 숨겨집니다. 이 예제
와 같이 HttpRespond를 처리해야 합니까?
업데이트 :
원인을 찾았고 코드를 업데이트했습니다.
"if (myCondition == true)"조건이 있습니다. 조건이 true 인 경우에만로드를 표시합니다. 그러나 우리는 인터셉트 방법에 대한 반환을 가져야합니다.
그래서 나는이 조건 밖에 "반환"을 넣었습니다.
이 반환으로 인해 문제가 발생하므로 로딩이 사라집니다.
그렇다면 이와 같은 시나리오를 어떻게 고칠 수 있습니까?
API 호출을하는 동안 특정 시나리오를 관리해야합니다.
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.loadingService.show(); //Initiate loader
return next.handle(req).do((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
this.loadingService.hide();
//Closing loader when you receive reponse
}
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
this.loadingService.hide();
//Closing loader when you have Error
}
})
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다