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 的 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。