角度5/ HttpInterceptor /检测(取消) xhr
角度5/ HttpInterceptor /检测(取消) xhr
提问于 2018-05-04 17:48:37
在我的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();
}
);
}
}回答 1
Stack Overflow用户
发布于 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');
}
})
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50172055
复制相关文章
相似问题
腾讯云开发者
