Angular HttpClient 和其他数据拉取客户端

由于 TanStack Query 的拉取机制基于 Promise 构建，且与具体实现无关，因此你可以使用任意异步数据拉取客户端，包括浏览器原生 fetch API、graphql-request 等。

使用 Angular 的 HttpClient 进行数据拉取

HttpClient 是 Angular 中功能强大且深度集成的组成部分，具备以下优势：

• 可通过 provideHttpClientTesting 在单元测试中模拟响应。
• 可使用 拦截器（Interceptors） 实现多种功能，例如添加认证请求头、执行日志记录等。尽管部分数据拉取库提供了自己的拦截器系统，但 HttpClient 拦截器与 Angular 的依赖注入系统深度集成。
• HttpClient 会自动通知 PendingTasks，使 Angular 能感知待处理请求。单元测试和服务器端渲染（SSR）可利用由此产生的应用 稳定性 信息，等待所有待处理请求完成。这使得 无 Zone（Zoneless） 应用的单元测试更加简单。
• 在使用 SSR 时，HttpClient 会缓存服务端执行的请求，从而避免客户端重复发起不必要的请求。HttpClient 的 SSR 缓存开箱即用。TanStack Query 提供了自身更强大的注水（hydration）功能，但需要额外配置。具体选择取决于你的实际使用场景。

在 queryFn 中使用 Observable

由于 TanStack Query 是基于 Promise 的库，因此需将 HttpClient 返回的 Observable 转换为 Promise。可通过 lastValueFrom 或 firstValueFrom 函数（来自 rxjs）完成该转换。

1@Component({2  // ...3})4class ExampleComponent {5  private readonly http = inject(HttpClient)6 7  readonly repoDataQuery = injectQuery(() => ({8    queryKey: ['repoData'],9    queryFn: () =>10      lastValueFrom(11        this.http.get('https://api.github.com/repos/TanStack/query'),12      ),13  }))14}

鉴于 Angular 正在将 RxJS 调整为可选依赖项，未来 HttpClient 很可能原生支持 Promise。

对 Angular 版 TanStack Query 的 Observable 支持已在规划中。

对比表格