RxJS Interval未轮询后端API：如何实现持续轮询至获取200响应？

我来帮你解决这个轮询的问题。你的核心需求是持续调用API直到拿到带结果的200响应，同时遇到202时不终止轮询，其他错误才终止。我们来一步步修正你的代码：

现有代码的问题分析 #

1. handleError返回of('continue')：这会让流发射一个字符串值，但后续的map会把响应变成undefined（因为console.log返回undefined），丢失了实际的响应数据。
2. 没有停止轮询的逻辑：当前的interval会一直运行，即使已经拿到了200的有效响应。
3. map误用导致数据丢失：map(res => console.log(res))会将流中的值替换为undefined，订阅者无法拿到实际结果。

修正后的完整代码 #

第一步：修改服务中的错误处理和轮询方法 #

首先，我们需要从rxjs导入必要的操作符：

import { Observable, interval, EMPTY, throwError } from 'rxjs';
import { switchMap, catchError, filter, first, tap } from 'rxjs/operators';

然后修改handleError方法，遇到202时返回EMPTY（不发射值，让轮询继续），其他错误则抛出：

handleError(data: HttpErrorResponse): Observable<any> {
  if (data.status === 202) {
    // 202表示任务未完成，返回EMPTY让轮询继续
    return EMPTY;
  } else {
    // 其他错误抛出，交给订阅者处理
    return throwError(() => new Error(data.message || 'Polling request failed'));
  }
}

接下来重写pollUntilTaskFinished方法，添加停止轮询的逻辑：

pollUntilTaskFinished(jobId: string): Observable<any> {
  return interval(2000).pipe(
    // 每次interval触发时发起API请求
    switchMap(() => 
      this.http.get(`/api/results/${jobId}`).pipe(
        catchError(err => this.handleError(err))
      )
    ),
    // 打印日志但不修改流的值（用tap替代map）
    tap(res => console.log('Received polling response:', res)),
    // 过滤掉无效响应（EMPTY不会发射值，所以这里只保留200的有效结果）
    filter(res => !!res),
    // 拿到第一个有效结果后立即停止轮询
    first(),
    // 可选：处理最终结果（比如提取需要的JSON字段）
    map(res => {
      // 这里可以根据你的需求处理结果，比如返回特定字段
      return res;
    })
  );
}

同时优化postUrl方法，确保返回有效的jobId：

postUrl(url: string): Observable<string> {
  return this.http.post<{ jobId: string }>('/api/start', { url }).pipe(
    map(res => {
      if (!res.jobId) {
        throw new Error('Job ID not returned from start request');
      }
      return res.jobId;
    })
  );
}

第二步：修改组件中的订阅逻辑 #

确保订阅时处理错误情况：

onSubmit() { 
  this.scraperService.postUrl(this.form.value.url)
    .pipe(
      switchMap(jobId => this.scraperService.pollUntilTaskFinished(jobId))
    )
    .subscribe( 
      finalResult => {
        console.log('Task completed successfully:', finalResult);
        // 这里可以处理最终结果，比如更新UI
      },
      error => {
        console.error('Error during task execution:', error);
        // 处理错误情况，比如显示错误提示
      }
    ); 
}

关键逻辑说明 #

1. EMPTY的作用：当API返回202时，catchError返回EMPTY，这意味着当前这次请求不会向流中发射任何值，interval会继续触发下一次轮询，不会中断整个流。
2. filter + first()：filter确保只有有效的200响应会被保留，first()则在拿到第一个有效响应后立即停止interval，结束轮询。
3. tap替代map打印日志：tap操作符用于执行副作用（比如打印日志）但不会修改流中的值，避免了数据丢失的问题。

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