向HttpInterceptor添加debounceTime

Question

我已经在我的angular项目中添加了一个http错误拦截器。

代码来自以下示例：https://medium.com/@satyapriyamishra111/angular-error-interceptor-4b102f938065

如果收到错误，我希望显示toast消息，但在某些情况下，我会多次收到相同的错误，toast消息也会多次显示。

我尝试添加一个debounceTime：

return next.handle(request)
.pipe(debounceTime(1000),
catchError((error: HttpErrorResponse) => {
  let errorMsg = '';
  if (error.error instanceof ErrorEvent) {
    console.log('this is client side error');
    //show toast
  }
  else {
    console.log('this is server side error');
    errorMsg = `Error Code: ${error.status},  Message: ${error.message}`;
  }
  console.log(errorMsg);
  return throwError(errorMsg);
})

但是，toast消息仍然会多次显示。

Answer 1

谢谢你的帮助，但答案对我不起作用。但我找到了有效的解决方案：

export class HttpErrorInterceptor implements HttpInterceptor {
 
private errorSubject = new Subject<void>();
private error$ = 
this.unreachableErrorSubject.asObservable().pipe(debounceTime(500)); 

constructor() {
  this.error$.subscribe(()=>showToast));
}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request)
  .pipe(
    catchError((error: HttpErrorResponse) => {
      let errorMsg = '';
      if (error.error instanceof ErrorEvent) {
        console.log('this is client side error');
        this.errorSubject.next();
      }
      else {
        console.log('this is server side error');
        errorMsg = `Error Code: ${error.status},  Message: ${error.message}`;
      }
      console.log(errorMsg);
      return throwError(errorMsg);
    })
  )
 }
}

Answer 2

我认为debounceTime只有在没有错误的时候才会发生(在快乐的路径上)。尝试在throwError的末尾添加debounceTime。

return next.handle(request)
.pipe( // remove debounceTime from here
catchError((error: HttpErrorResponse) => {
  let errorMsg = '';
  if (error.error instanceof ErrorEvent) {
    console.log('this is client side error');
    //show toast
  }
  else {
    console.log('this is server side error');
    errorMsg = `Error Code: ${error.status},  Message: ${error.message}`;
  }
  console.log(errorMsg);
  return throwError(errorMsg).pipe(debounceTime(1000)); // add debounceTime here
});

Answer 3

debounceTime只会增加一个延迟，但仍然会到达处理程序。您是否尝试过使用take操作符来处理第一个发出的值，如下所示？

return next.handle(request)
.pipe(take(1), catchError((error: HttpErrorResponse) => {
    let errorMsg = '';
    if (error.error instanceof ErrorEvent) {
      console.log('this is client side error');
      //show toast
    }
    else {
      console.log('this is server side error');
      errorMsg = `Error Code: ${error.status},  Message: ${error.message}`;
    }
    console.log(errorMsg);
    return throwError(errorMsg);
  })