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 有自己的数据水合功能，可能更强大，但需要一些设置。哪种最适合您的需求取决于您的用例。

由于 TanStack Query 是一个基于 Promise 的库，来自 HttpClient 的 Observables 需要转换为 Promises。这可以通过 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 未来也将支持 Promises。

TanStack Query for Angular 支持 Observables 的计划正在进行中。