Angular HttpClient 及其他数据获取客户端

由于 TanStack Query 的请求机制基于 Promise 无感知构建，您实际上可以使用任何异步数据请求客户端，包括浏览器原生的 fetch API、graphql-request 等。

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

• 在单元测试中使用 provideHttpClientTesting 模拟响应。
• 拦截器 可用于广泛功能，如添加认证头、执行日志记录等。虽然某些数据请求库拥有自己的拦截器系统，但 HttpClient 拦截器与 Angular 的依赖注入系统深度集成。
• HttpClient 会自动通知 PendingTasks，使 Angular 能感知待处理请求。单元测试和服务端渲染 (SSR) 可利用应用 稳定性 信息等待请求完成，这极大简化了 无 Zone (Zoneless) 应用的单元测试。
• 使用 SSR 时，HttpClient 会 缓存服务端请求，避免客户端重复请求。其 SSR 缓存开箱即用。虽然 TanStack Query 的 hydration 功能更强大但需额外配置，具体选择取决于您的使用场景。

由于 TanStack Query 是基于 Promise 的库，需将 HttpClient 的 Observable 转换为 Promise。可通过 rxjs 的 lastValueFrom 或 firstValueFrom 实现：

@Component({
  // ...
})
class ExampleComponent {
  private readonly http = inject(HttpClient)

  readonly query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      lastValueFrom(
        this.http.get('https://api.github.com/repos/tanstack/query'),
      ),
  }))
}

@Component({
  // ...
})
class ExampleComponent {
  private readonly http = inject(HttpClient)

  readonly query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      lastValueFrom(
        this.http.get('https://api.github.com/repos/tanstack/query'),
      ),
  }))
}

随着 Angular 逐步将 RxJS 作为可选依赖，预计 HttpClient 未来也将支持 Promise。

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