Angular 带有重试和延迟的 HttpClient 请求正在发送一个额外的请求然后取消它

Question

我正在尝试使用 Angulars HttpClient 服务发出请求，尝试多次，中间有延迟。该代码有效，但我在 devTools 网络分路器中注意到，最后发送并取消了一个额外的请求。我在这里做错了什么是代码：

return this.http.post<LoginSuccessPayload>('/api/auth/signin', payload).pipe(
  retryWhen(errors => {
    return errors.pipe(
      mergeMap((er: any) => {
        if (er.status === 504 || er.status === 503) {
          return of(er.status).pipe(delay(1000));
        }
        return _throw({message: er.error.message || 'Notification.Core.loginError'});
      }),
      take(3),
      concat(_throw({message: 'Notification.Core.networkError'}))
    );
  })
);

这是一张 Firefox 和 Chrome 网络选项卡的图像，应该有三个请求，但它有四个和取消最后一个

Answer 1

我是这样解决的。现在尝试三次，每个请求有第二次延迟，并且没有额外取消的请求

 return this.http.post<LoginSuccessPayload>('/api/auth/signin', payload).pipe(
  retryWhen(errors => errors.pipe(
    switchMap((error) => {
      if (error.status === 504 || error.status === 503) {
        return of(error.status);
      }
      return _throw({message: error.error.message || 'Notification.Core.loginError'});
    }),
    scan(acc => acc + 1, 0),
    takeWhile(acc => acc < 3),
    delay(1000),
    concat(_throw({message: 'Notification.Core.networkError'}))
  ))
);

Answer 2

下面是我的 HttpInterceptorService 代码。代码工作正常。我想根据计数重试。假设我最初的 retryWaitMilliSeconds = 300 和 retryCount = 3

第一次我想重试 300 * 1

第二次我想重试 300 * 2

第三次我想重试 300 * 3

private retryCount = 3;
private retryWaitMilliSeconds = 500;

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        let ok: string;
        const started = Date.now();

        // Handle request
        request =    request.clone({
            setHeaders: {
                "Authorization": "Bearer  XXXXXXXXXXXXXXXXXXX"
            }
        });

        return next.handle(request).pipe(
            tap(event => ok = event instanceof HttpResponse ? 'succeeded' : ''),
            retryWhen(error => error.pipe(concatMap((error, count) => {
                ok = 'failed'
                if (count <= this.retryCount && error.status === 500) {
                    return of(error);
                }
                return throwError(error);
            }), delay(this.retryWaitMilliSeconds),
                tap(err => console.log("Retrying...")))
            ), finalize(() => {
                
            }))
    }

Angular 带有重试和延迟的 HttpClient 请求正在发送一个额外的请求然后取消它

Angular HttpClient request with retry and delay is sending an extra request then canceling it

javascript

rxjs

angular

angular-httpclient