使用 TanStack Angular Query 简化 Angular v 中的 API 调用

本文提供了有关在 Angular v18 项目中使用稳定的 @tanstack/query-angular 包进行高效 API 调用的指导？

管理 Angular 项目中的 API 交互通常涉及重复的逻辑，导致代码重复、增加维护负担以及潜在的状态管理复杂性。虽然 @tanstack/angular-query-experimental 提供了一个强大的解决方案，但值得注意的是，该包仍处于实验开发阶段。相反，对于 Angular v17 项目，请考虑使用稳定的 @tanstack/angular-query-experimental 包。

TanStack Angular Query 的主要优点：

声明式方法：定义封装 API 请求和相关数据处理的查询函数，促进干净且可读的代码。

自动缓存和重新获取：利用内置缓存策略（例如“stale-while-revalidate”）来优化性能并减少不必要的服务器调用。根据您的需求（例如数据过时或窗口重新聚焦）实施数据重新获取，以增强数据一致性。

反应式数据处理：使用可观察量和信号访问和管理数据，从而在 UI 组件中实现反应式更新，无需手动生命周期挂钩或复杂的状态管理模式。

模块化设计：将API逻辑组织成可重用的查询实体，促进代码组织和可维护性。

专用开发工具：通过 TanStack 查询开发工具深入了解查询执行、缓存状态和重新获取模式，从而促进调试和优化。

安装：

使用npm或yarn安装必要的包：

npm install @tanstack/query-angular-experimental @tanstack/angular-query-devtools-experimental 

分步实施：

虽然 @tanstack/angular-query-experimental 可用于 Angular v17，但它目前处于实验开发阶段，不建议用于生产使用。为了在 Angular v17 项目中实现稳定可靠的 API 调用管理，请考虑使用稳定的 @tanstack/query-angular 包。

这是分步实施指南：

1.在app.config.ts中添加Provider：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { QueryClient, provideAngularQuery } from '@tanstack/angular-query-experimental';

const queryClient = new QueryClient();

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAngularQuery(queryClient)
  ]
};

• 导入provideHttpClient、QueryClient、provideAngularQuery。
• 通过依赖注入提供路由、HTTP 和 Angular Query 功能来定义和导出应用程序配置对象。

2. 为 API 响应定义基于 Typescript 的类型：

类型在 TypeScript 中用于指定数据的结构和类型，有助于代码组织和错误预防。在您的 Angular 应用程序中，此类型可能充当构建从 API 或其他数据源检索的数据的蓝图。

npm install @tanstack/query-angular-experimental @tanstack/angular-query-devtools-experimental 

3.定义一个Service repos.service.ts来消费API调用：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { QueryClient, provideAngularQuery } from '@tanstack/angular-query-experimental';

const queryClient = new QueryClient();

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAngularQuery(queryClient)
  ]
};

该服务负责向 GitHub API 发出 HTTP 请求以获取存储库数据。它使用 HttpClient 发出请求，并期望响应数据符合 Response 类型中定义的结构。

4. 在组件 github-repo-list.component.ts 中启动 Angular Query：

组件使用 Angular Query 来管理数据获取和缓存。它注入 ReposService 来进行 API 调用。它定义了一个具有唯一键“repoData”的查询，以使用 queryFn 获取存储库数据。

export type Response = {
  name: string
  description: string
  subscribers_count: number
  stargazers_count: number
  forks_count: number
}

5. 让我们在组件 UI github-repo-list.component.html 中渲染数据：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Response } from '../../types/responce.type';

@Injectable({
  providedIn: 'root'
})
export class ReposService {

  endpoint: string = 'https://api.github.com';

  constructor(
    private http: HttpClient
  ) { }

  getRepos() {
    return this.http.get<Response>(`${this.endpoint}/repos/tanstack/query`);
  }
}

• 此模板根据查询的状态有条件地呈现不同的内容：加载、错误或成功。
• 它有效地处理不同的场景，为用户提供适当的反馈。
• 它包含用于调试和检查的 Angular Query 开发工具。

工作演示：

在 Github 上查看完整的源代码。谢谢？

以上是使用 TanStack Angular Query 简化 Angular v 中的 API 调用的详细内容。更多信息请关注PHP中文网其他相关文章！