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

发布于06月03日

我有一个angular 6应用程序，配置为在失败时重试http请求3次.

有没有办法做到这一点？

我在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对象，并添加一个自定义头字段(键:值对).可以在我们的API调用中向该标头传递一个附加参数.我们可以在拦截器中使用头部，并且可以编写自己的逻辑.

 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)
    );

在拦截器文件中，访问标头并使用ternational操作符使用retry操作符.

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
    );
  }

如果您需要代码，可以查看以下链接.

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

如果你想了解我的代码，可以查看我的中间文章.