Angular 6中如何在do-while循环内延迟递归HTTP Get请求？

我来帮你拆解下问题根源，再给出符合Angular最佳实践的解决方案～

首先要明确：同步的do-while循环不会等待异步操作完成，不管是RxJS的delay还是setTimeout都是异步行为，同步循环会瞬间跑完无数次，直接导致大量请求被发起，这就是你遇到问题的核心原因。

为什么之前的方法无效？ #

1. RxJS的delay用法错误：delay是Observable管道操作符，必须放在pipe()里才能作用于HTTP请求流，单独调用delay(3000)完全不会产生延迟效果。
2. setTimeout无法阻塞同步循环：哪怕你在循环里加了setTimeout，同步的do-while也不会等回调执行，会立刻进入下一次循环，瞬间创建成千上万个定时器，疯狂发起请求。
3. this指向问题：setTimeout的普通函数回调里，this会指向全局对象，导致无法正确调用this.http。

最优解决方案：用RxJS实现响应式定时请求 #

在Angular里，处理这种异步循环场景，RxJS是最适配的工具——它能优雅管理异步流，还能轻松实现「初始化完成就停止请求」的逻辑。

步骤1：声明停止信号Subject #

在组件内声明一个Subject，用来传递「停止请求」的信号：

import { Subject } from 'rxjs';
import { interval, takeUntil, switchMap } from 'rxjs/operators';

// 组件类内部
private stopFetching$ = new Subject<void>();

步骤2：修改初始化API逻辑 #

当初始化API调用完成后，发送停止信号终止定时请求：

initializeCrawling(): void { 
  this.callCrawlInitializingAPI()
    .subscribe( restItems => { 
      this.groupCrawlingRestResponse = restItems; 
      console.log(this.groupCrawlingRestResponse); 
      // 初始化完成，发送停止信号并结束Subject
      this.stopFetching$.next();
      this.stopFetching$.complete();
    } );

  // 启动定时请求
  this.startFetchingResults();
}

步骤3：实现定时请求逻辑 #

用interval创建定时流，结合takeUntil监听停止信号，每次间隔发起API请求：

startFetchingResults(): void {
  interval(3000) // 每3秒触发一次请求
    .pipe(
      takeUntil(this.stopFetching$), // 收到停止信号就终止流
      switchMap(() => this.fetchDataApiCall()) // 每次触发时调用API
    )
    .subscribe(restItems => {
      this.groupCrawlingRestResponse = restItems;
      console.log(this.groupCrawlingRestResponse);
    });
}

fetchDataApiCall() {
  // 这里的map如果只是返回原数据，可以省略，HTTP请求默认会返回响应数据
  return this.http.get<any[]>(this.fetchResultsUrl, this.groupCrawlingResultRestResponse);
}

备选方案：用setInterval实现（你提到的解决方法） #

如果你更习惯用原生定时器，也可以用setInterval，但要记得手动清理定时器避免内存泄漏：

private intervalId: number;

initializeCrawling(): void { 
  this.callCrawlInitializingAPI()
    .subscribe( restItems => { 
      this.groupCrawlingRestResponse = restItems; 
      console.log(this.groupCrawlingRestResponse); 
      // 初始化完成，清除定时器
      clearInterval(this.intervalId);
    } );

  // 每3秒发起一次请求
  this.intervalId = setInterval(() => {
    this.fetchDataApiCall().subscribe(restItems => {
      this.groupCrawlingRestResponse = restItems;
      console.log(this.groupCrawlingRestResponse);
    });
  }, 3000);
}

不过这种方式需要手动管理定时器和订阅，在复杂场景下更容易出现内存泄漏，所以更推荐RxJS的响应式方案。

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