angular - HttpInterceptor 对 snackbar 操作的重试请求

Question

我正在使用 HttpInterceptor 类来集中捕获和处理来自服务器的意外错误。我已经成功地完成了大部分工作，但希望通过允许用户根据响应代码重试某些请求来稍微扩展一下。但是，我不知道该怎么做。这是我到目前为止所拥有的:

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // Add HTTP Auth to access the API
        request = request.clone({
            setHeaders: {
                Authorization: 'Basic ' + btoa('my_api_key:')
            }
        });

        // handle response
        return next.handle(request).pipe(
            catchError((error: HttpErrorResponse, caught: Observable<any>) => {
                console.log('error occurred');

                if (error.status === 401) {
                    const snackBarRef = this.snackBar.open('Error occurred', 'Retry', {
                        duration: 7000
                    });

                    snackBarRef.onAction().subscribe(() => {
                    });
                    return EMPTY;
                }
                return throwError(error.statusText);
            })
        );
    }

到目前为止，它按预期捕获错误，如果是 401 错误，则显示 snackbar 以及重试操作。我将如何从 snackbar 操作中发出重试？

Answer 1

您可以使用第二个参数 caught传递给 catchError重试相同请求的管道。

return snackBarRef.onAction().pipe(concatMap(() => caught)); 

Stackblitz Example