在 Angular 2+ 中订阅后 API 调用失败时如何重试

Question

我正在调用 API 来获取随机详细信息。问题是，有时我会收到 502 错误作为网关错误，并且它也可能由于网络连接错误而中断。下面是我的API调用代码

// COMPONENT API CALL SUBSCRIBE
     this._service.post('randomAPI/getdetails', filters).subscribe((response: any) => {
     this.itemList = response;    
   });

// SHARED SERVICE
     post<T>(url: string, body: any): Observable<T> {
     return this.httpClient.post<T>(url, body);
   } 

每当我收到 500 或 502 服务器错误时，我都会使用拦截器路由到错误页面以通知用户服务器问题。

相反，如果失败，我可以让 API 在组件级别或拦截器级别再尝试一次，然后路由到错误页面吗？

// INTERCEPTOR
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(catchError(error => {
        if (error.status === 401 || error.status === 400 || error.status === 403) {
            this.router.navigateByUrl('abort-access', { replaceUrl: true });
        } else if (error.status === 500 || error.status === 502) {
                this.router.navigateByUrl('server-error', { replaceUrl: true });
        }
        return throwError("error occured");
     }));
    }

我看到了一些例子，因为他们使用管道并添加 retryWhen() 来实现这一点。但由于我对角度非常陌生，我无法找到一种方法来做到这一点。

有人可以帮忙吗？

Answer 1

您可以使用retryWhen运算符。这背后的原理是当你不想重试时抛出错误。

retryWhen实际上是一个奇特的功能catchError，除非抛出错误，否则它会自动重试。

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(request).pipe(
    // retryWhen operator should come before catchError operator as it is more specific
    retryWhen(errors => errors.pipe(
      // inside the retryWhen, use a tap operator to throw an error 
      // if you don't want to retry
      tap(error => {
        if (error.status !== 500 && error.status !== 502) {
          throw error;
        }
      })
    )),

    // now catch all other errors
    catchError(error => {     
      if (error.status === 401 || error.status === 400 || error.status === 403) {
        this.router.navigateByUrl('abort-access', { replaceUrl: true });
      }

      return throwError("error occured");
    })
  );
}

演示： https: //stackblitz.com/edit/angular-qyxpds

限制重试

这样做的危险在于，您将执行连续的请求，直到服务器不返回 500 或 502。在现实世界的应用程序中，您可能希望限制重试，并且可能会在其中放置某种延迟以避免服务器淹没与请求。

为此，您可以使用take(n)它将您的请求限制为n失败的尝试。这对您不起作用，因为take会阻止可观察对象继续前进catchError，并且您将无法执行导航。

相反，您可以设置重试限制，并在达到重试限制后抛出错误。

const retryLimit = 3;
let attempt = 0;

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(request).pipe(
    // retryWhen operator should come before catchError operator as it is more specific
    retryWhen(errors => errors.pipe(
      tap(error => {
        if (++attempt >= retryLimit || (error.status !== 500 && error.status !== 502)) {
          throw error;
        }
      })  
    )),

    // now catch all other errors
    catchError(error => {     
      if (error.status === 401 || error.status === 400 || error.status === 403) {
        this.router.navigateByUrl('abort-access', { replaceUrl: true });
      } else if (error.status === 500 || error.status === 502) {
        this.router.navigateByUrl('server-error', { replaceUrl: true });
        // do not return the error
        return empty();
      }

      return throwError("error occured");
    })
  );
}

演示： https: //stackblitz.com/edit/angular-ud1t7c