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

由于 TanStack Query 的获取机制是基于 Promise 构建的，因此您可以使用任何异步数据获取客户端，包括浏览器原生 fetch API、 graphql-request 等。

HttpClient 是 Angular 的强大且集成的部分，它具有以下优点

• 使用 provideHttpClientTesting 在单元测试中模拟响应。
• 拦截器 可用于各种功能，包括添加身份验证标头、执行日志记录等。虽然某些数据获取库有自己的拦截器系统，但 HttpClient 拦截器与 Angular 的依赖注入系统集成。
• HttpClient 自动通知 PendingTasks，这使 Angular 能够感知到挂起的请求。单元测试和 SSR 可以使用生成的应用程序稳定性信息来等待挂起的请求完成。这使得 Zoneless 应用程序的单元测试更加容易。
• 当使用 SSR 时，HttpClient 将 缓存请求 在服务器上执行的请求。这将防止客户端上不必要的请求。HttpClient SSR 缓存开箱即用。TanStack Query 有自己的 hydration 功能，可能更强大，但需要一些设置。哪一个最适合您的需求取决于您的用例。

由于 TanStack Query 是一个基于 Promise 的库，因此来自 HttpClient 的 Observables 需要转换为 Promise。这可以使用 lastValueFrom 或 firstValueFrom 函数从 rxjs 完成。

@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 中支持 Observables。