使用 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`);
  }
}
</response>

• 此範本根據查詢的狀態有條件地呈現不同的內容：載入、錯誤或成功。
• 它有效地處理不同的場景，為使用者提供適當的回饋。
• 它包含用於偵錯和檢查的 Angular Query 開發工具。

工作演示：

在 Github 上查看完整的原始碼。謝謝？

以上是使用 TanStack Angular Query 簡化 Angular v 中的 API 呼叫的詳細內容。更多資訊請關注PHP中文網其他相關文章！