Angular 定时发起HTTP请求仅触发1-2次后续复用旧响应问题求助

问题根因 #

1. GET请求被浏览器缓存：你每次调用的接口URL完全一致，浏览器默认会对GET请求做缓存，后续重复请求会直接读取本地缓存返回，不会发起新的网络请求，所以网络面板看不到新请求，控制台打印的是缓存的旧响应内容。
2. 冗余的Promise包装逻辑：this.httpClient.get().toPromise()本身已经返回标准Promise实例，你额外嵌套的Promise属于无用代码，还缺失了错误捕获逻辑，容易隐藏请求异常。
3. setInterval方案的天然缺陷：如果前一次请求响应较慢，定时器到点后会强行发起新请求，容易出现请求堆积、响应顺序错乱的问题。

解决方案 #

方案1：修复现有Promise实现 #

去掉冗余Promise包装，添加防缓存参数，补充错误捕获：

updateLeaderboardHttpRequest(filterBy: CompetitionFilteringOptions) {
  const _interval = setInterval(async () => {
    try {
      console.log('making request');
      // 拼接时间戳参数，保证每次请求URL不同，避免浏览器缓存
      const response = await this.httpClient.get('https://random-data-api.com/api/cannabis/random_cannabis?size=30&_t=' + Date.now()).toPromise();
      console.log(response);
    } catch (err) {
      console.error('请求异常：', err);
    }
  }, 10000);
}

如果不想加URL参数，也可以配置请求头禁用缓存：

const response = await this.httpClient.get('https://random-data-api.com/api/cannabis/random_cannabis?size=30', {
  headers: {
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache'
  }
}).toPromise();

方案2：更适配Angular技术栈的RxJS原生实现 #

用RxJS的interval+switchMap组合，自动处理未完成请求的取消，避免请求堆积，还能方便地在组件销毁时释放资源：

import { interval, switchMap, Subscription } from 'rxjs';

private intervalSub: Subscription;

updateLeaderboardHttpRequest(filterBy: CompetitionFilteringOptions) {
  // 每10秒触发一次请求，switchMap会自动取消上一次未完成的请求
  this.intervalSub = interval(10000).pipe(
    switchMap(() => {
      console.log('making request');
      return this.httpClient.get('https://random-data-api.com/api/cannabis/random_cannabis?size=30&_t=' + Date.now())
    })
  ).subscribe({
    next: (res) => console.log(res),
    error: (err) => console.error('请求异常：', err)
  })
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy() {
  this.intervalSub?.unsubscribe();
}

内容的提问来源于stack exchange，提问作者Kristoffer Tølbøll