如何使用Angular信号与Resource API实现定时轮询

嘿，我完全get到你的需求了——你需要用Angular的Resource API（不管是rxResource还是原生的resource）实现定时轮询，明确不想用短轮询或者推送方案，2分钟的间隔刚好合适。看你现有的代码，现在是只有当请求信号serviceIdSignal变化时才会触发刷新，但你要的是即使业务参数不变，也能每隔固定时间自动拉取数据，对吧？

那核心思路就是：给Resource API的请求信号加一个定时变化的“触发因子”，让它误以为请求参数变了，从而自动发起新请求。下面是具体的改造方案，我会一步步讲清楚：

改造后的完整代码 #

import { Component, inject, signal, WritableSignal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { rxResource, resource } from '@ngx-resource/core';
import { interval, toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-root',
  imports: [CommonModule],
  template: `
    <div>{{rxResource.value() | json}}</div>
    <hr/>
    <div>{{resource.value() | json}}</div>
  `,
})
export class App {
  http = inject(HttpClient);
  serviceIdSignal: WritableSignal<number> = signal(1);
  
  // 1. 创建轮询触发信号：每隔2分钟（120000ms）更新一次值
  pollTrigger = toSignal(interval(120000), { initialValue: Date.now() });

  rxResource = rxResource({
    // 2. 合并业务参数和轮询触发因子，只要触发因子变了，就会触发新请求
    request: () => ({
      id: this.serviceIdSignal(),
      pollKey: this.pollTrigger()
    }),
    // 3. 实际请求只用业务ID，忽略触发因子
    loader: ({ request: { id } }) => {
      return this.http.get(`https://jsonplaceholder.typicode.com/todos/${id}`);
    },
  });

  resource = resource({
    request: () => ({
      id: this.serviceIdSignal(),
      pollKey: this.pollTrigger()
    }),
    loader: ({ request: { id } }) => {
      return fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then(
        (res: any) => res.json()
      );
    },
  });
}

关键改造点解析 #

1. 轮询触发信号：用interval(120000)生成一个每隔2分钟发射一次值的Observable，再通过toSignal转成Angular信号pollTrigger。每次间隔到了，这个信号的value就会更新（这里用时间戳，保证每次值都不一样）。
2. 合并请求参数：把原来单一的id请求，改成包含id（业务参数）和pollKey（触发因子）的对象。这样不管serviceIdSignal有没有变化，只要pollKey更新，Resource API就会判定请求参数发生了变化，自动调用loader发起新请求。
3. Loader忽略触发因子：实际调用后端接口时，我们只需要用到业务IDid，所以在loader里解构出id即可，pollKey只是用来触发刷新的“开关”，不需要传给后端。

可选优化：手动控制轮询启停 #

如果需要手动控制轮询的开启/暂停，比如加个按钮切换，可以把pollTrigger改成可写信号，用setInterval手动控制更新：

pollTrigger: WritableSignal<number> = signal(Date.now());
private pollTimer?: number;

ngOnInit() {
  // 启动轮询
  this.startPolling();
}

ngOnDestroy() {
  // 组件销毁时清理定时器
  this.stopPolling();
}

startPolling() {
  this.pollTimer = window.setInterval(() => {
    this.pollTrigger.set(Date.now());
  }, 120000);
}

stopPolling() {
  if (this.pollTimer) {
    clearInterval(this.pollTimer);
    this.pollTimer = undefined;
  }
}

然后在模板里加个按钮调用这两个方法就行，非常灵活。

这样改造后，你的组件就会严格按照2分钟的间隔自动拉取数据，完全符合你要的拉取式轮询需求，也不会有短轮询带来的性能压力。

备注：内容来源于stack exchange，提问作者Naren Murali