Angular中如何给retry重试请求设置时间间隔

实现方案 #

你需要将重试间隔逻辑放在pipe方法内的重试相关操作符中，所有流控制逻辑都需要在subscribe之前完成，不能放在subscribe之后。

RxJS 7.3+ 版本（Angular 14+ 通常默认搭载该版本及以上） #

直接使用retry操作符的配置项即可实现带间隔的重试：

import { retry } from 'rxjs/operators';

this.http.get(`api`)
  .pipe(
     retry({
       // 可选：设置最大重试次数，不填该参数则会无限重试
       count: 5,
       // 每次重试之间间隔5秒
       delay: 5000,
     })
   )
  .subscribe(
     s => {
       // 处理请求成功结果
     },
     error => {
       // 所有重试均失败后处理最终错误
     }
   );

低版本 RxJS 兼容方案 #

如果使用的是7.3以下版本的RxJS，使用retryWhen配合delay操作符实现：

import { retryWhen, delay, take } from 'rxjs/operators';

this.http.get(`api`)
  .pipe(
     retryWhen(errors => 
       errors.pipe(
         // 每次出错后等待5秒再发起重试
         delay(5000),
         // 可选：设置最大重试次数为5次，去掉该操作符则会无限重试
         take(5)
       )
     )
   )
  .subscribe(
     s => {
       // 处理请求成功结果
     },
     error => {
       // 所有重试均失败后处理最终错误
     }
   );

注意事项 #

• 如果不需要限制重试次数，只要删除对应示例中的count配置或take操作符即可，请求会一直按照5秒间隔重试直到返回成功结果。
• 该方案可以完全避免短时间大量发起请求的问题，每5秒只会产生1次新的连接。

内容的提问来源于stack exchange，提问作者moris62