在我的angular应用程序中,我发现chrome (取消) api调用启动得太快了。我还有一个HttpInterceptor,如果每个HttpClient请求还没有完成,它会在500ms之后触发一个加载指示器。然而,对于get (取消)的请求,似乎没有任何新的事件随后隐藏我的加载指示器。
有没有办法在HttpInterceptor中检测“已取消”的请求,这样我就可以再次隐藏我的加载指示器?
export class GlobalHttpInterceptor implements HttpInterceptor {
constructor(
private sessionService: SessionService,
private loadingService: LoadingService
) { }
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
setTimeout(() => {
if (showLoading) {
this.loadingService.show();
}
}, 500);
let showLoading = true;
if (this.sessionService.headers.length > 0) {
for (const x of this.sessionService.headers) {
req = req.clone({
headers: req.headers.set(x.key, x.value)
});
}
}
return next.handle(req)
.do(
(response) => {
if (response instanceof HttpResponse) {
showLoading = false;
this.loadingService.hide();
}
},
(error) => {
showLoading = false;
this.loadingService.hide();
}
);
}
}
发布于 2019-10-17 18:57:03
在Davy的回答基础上展开,这就是我检测中止请求的方式。
正如他所说的,finalize将始终在可观察到的源完成时运行,在这种情况下,它要么是成功响应,要么是错误响应,要么是中止的请求。
我的方法的关键是跟踪你到目前为止收到的东西。
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let lastResponse: HttpEvent<any>;
let error: HttpErrorResponse;
return next.handle(request)
.pipe(
tap((response: HttpEvent<any>) => {
lastResponse = response;
if (response.type === HttpEventType.Response) {
console.log('success response', response);
}
}),
catchError((err: any) => {
error = err;
console.log('error response', err);
// TODO: error handling if required
return throwError(err);
}),
finalize(() => {
if (lastResponse.type === HttpEventType.Sent && !error) {
// last response type was 0, and we haven't received an error
console.log('aborted request');
}
})
);
}
https://stackoverflow.com/questions/50172055
复制相似问题