NgRx Effect中如何替换已废弃的RxJS retryWhen操作符

开发者阿泽

2026-8-26

retryWhen 官方替代方案

RxJS 7+ 版本中，已标记废弃的retryWhen官方推荐直接使用增强后的retry操作符替代，通过传入配置对象即可实现完全等价的自定义重试逻辑，无需额外组合复杂操作符。

逻辑对齐说明

修改后的代码和原有逻辑1:1匹配：

派发signIn触发动作后，Effect接收参数发起HTTP POST请求
仅当请求返回504状态码时触发重试，其余错误直接派发失败动作，不进入重试流程
每次重试间隔4秒，最多重试4次
请求正常响应时派发成功动作

修改后的完整代码

authSignIn$ = createEffect(() => this.actions$.pipe(
    ofType(authActions.signInStart),
    exhaustMap(action => this.http
      .post<responseModel.SignInResponse>(`${environment.baseUrl}/${authBaseUrl}/${ApiPaths.singIn}`, {
        codF: action.username,
        password: action.password
      })
      .pipe(
        map((response) => authActions.signInSuccess({user: response.accountInfo, token: response.token})),
        catchError((error: HttpErrorResponse) => {
          if (error.status === 504) {
            return throwError(() => error);
          }
          return of(authActions.signInFail({error: error.message}))
        }),
        // 替换废弃的retryWhen，使用官方标准retry配置写法
        retry({
          count: 4,
          delay: (errors) => errors.pipe(delay(4000))
        })
      )
    )
  ));

替换点说明

retry的对象配置完全覆盖原retryWhen的所有能力：

count参数：等价于原逻辑中take(4)的作用，指定最大重试次数
delay参数：接收一个返回Observable的函数，入参是错误流，和原retryWhen的入参逻辑完全一致，此处传入delay(4000)即可实现每次重试前等待4秒的效果，你也可以在这个函数中扩展逻辑，比如针对不同错误类型决定是否继续重试、动态调整重试间隔等。