如何从 RxJS 重试中排除某些 url

How to exclude certain urls from RxJS retry

我有一个 angular 6 应用程序,配置为在失败时重试 3 次 HTTP 请求。 我想从该政策中排除某些网址:/login(例如)。

有办法吗?

我在 RxJs 文档中找不到任何答案。

感谢您的帮助

这是我的代码:

@Injectable()
export class RetryInterceptor implements HttpInterceptor {
    constructor( public spinnerService: NgxSpinnerService ) { }   
   
    timer: any;
    intercept(req: HttpRequest<any>, next: HttpHandler):
        Observable<HttpEvent<any>> {
         
            if(this.timer){
                clearTimeout(this.timer);
              }
              this.timer = setTimeout(() =>  this.spinnerService.show(), 500);           

            let handleObs: Observable<HttpEvent<any>> = next.handle(req)
            .pipe(                                        
                 retry(3),
                 finalize(() =>{
                    this.spinnerService.hide();
                    if(this.timer){
                        clearTimeout(this.timer);
                      }
                 }
                 )             
            );          

        return  handleObs;
    };
}

首先你必须创建一个函数,我们将在其中创建一个 HTTP headers object 并且我们将添加一个自定义 header 字段(键:值对)。这个 header 可以在我们的 API 调用中传递一个附加参数。我们可以在拦截器中使用header,我们可以编写自己的逻辑。

 export function retryCall() {
      let headers = new HttpHeaders();
      headers = headers.set('retryCall', 'true');
      return { headers: headers };
    }

在你的公共文件中添加上面的函数。

intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    let isretry = request.headers.get('retryCall');
    let count = 0;
    return next.handle(request).pipe(
      tap((s) => console.log(count++)),
      retry(isretry ? this.retryCount : 0)
    );

在您的拦截器文件中访问 header 并使用三元运算符使用重试运算符。

this.httpService.getAPIWithError(2, retryCall()).subscribe((data) => {
      console.log('data: ', data);
    });

在您的代码中像上面那样传递 retryCall 函数。这是一个可选参数。

 getAPIWithError(id: number, headers?: any) {
    return this.httpClient.get(
      `https://jsonplaceholder.typicode.com/todos/2/${id}`,
      headers
    );
  }

如果您需要代码,可以查看下面的内容link。

https://stackblitz.com/edit/angular-retry-rxjs-interceptor?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fhttp-service.ts,src%2Fapp%2Fretry-interceptor.interceptor.ts,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

如果你想要我的代码的解释,你可以查看我的中篇文章。 https://mohammedfahimullah.medium.com/apply-retry-operator-for-specific-apis-478f93742492