本文提供了在 Angular v18 專案中使用穩(wěn)定的 @tanstack/query-angular 套件進行高效 API 呼叫的指導(dǎo)？

管理 Angular 專案中的 API 互動通常涉及重複的邏輯，導(dǎo)致程式碼重複、增加維護負擔(dān)以及潛在的狀態(tài)管理複雜性。雖然 @tanstack/angular-query-experimental 提供了一個強大的解決方案，但值得注意的是，該套件仍處於實驗開發(fā)階段。相反，對於 Angular v17 項目，請考慮使用穩(wěn)定的 @tanstack/angular-query-experimental 套件。

TanStack Angular Query 的主要優(yōu)點：

聲明式方法：定義封裝 API 請求和相關(guān)資料處理的查詢函數(shù)，促進乾淨(jìng)且可讀的程式碼。

自動快取和重新取得：利用內(nèi)建快取策略（例如「stale-while-revalidate」）來最佳化效能並減少不必要的伺服器呼叫。根據(jù)您的需求（例如資料過時或視窗重新聚焦）實施資料重新獲取，以增強資料一致性。

反應(yīng)式數(shù)據(jù)處理：使用可觀察量和訊號存取和管理數(shù)據(jù)，從而在 UI 元件中實現(xiàn)反應(yīng)式更新，無需手動生命週期掛鉤或複雜的狀態(tài)管理模式。

模組化設(shè)計：將API邏輯組織成可重複使用的查詢實體，促進程式碼組織和可維護性。

專用開發(fā)工具：透過 TanStack 查詢開發(fā)工具深入了解查詢執(zhí)行、快取狀態(tài)和重新取得模式，從而促進除錯和最佳化。

安裝：

使用npm或yarn安裝必要的套件：

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

分步實施：

雖然 @tanstack/angular-query-experimental 可用於 Angular v17，但它目前處於實驗開發(fā)階段，不建議用於生產(chǎn)使用。為了在 Angular v17 專案中實現(xiàn)穩(wěn)定可靠的 API 呼叫管理，請考慮使用穩(wěn)定的 @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)
  ]
};

• 導(dǎo)入provideHttpClient、QueryClient、provideAngularQuery。
• 透過依賴注入提供路由、HTTP 和 Angular Query 功能來定義和匯出應(yīng)用程式配置物件。

2. 為 API 回應(yīng)定義基於 Typescript 的類型：

類型在 TypeScript 中用於指定資料的結(jié)構(gòu)和類型，有助於程式碼組織和錯誤預(yù)防。在您的 Angular 應(yīng)用程式中，此類型可能會作為建立從 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)
  ]
};

該服務(wù)負責(zé)向 GitHub API 發(fā)出 HTTP 請求以取得儲存庫資料。它使用 HttpClient 發(fā)出請求，並期望回應(yīng)資料符合 Response 類型中定義的結(jié)構(gòu)。

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`);
  }
}

• 此範本根據(jù)查詢的狀態(tài)有條件地呈現(xiàn)不同的內(nèi)容：載入、錯誤或成功。
• 它有效地處理不同的場景，為使用者提供適當(dāng)?shù)幕仞仭?
• 它包含用於偵錯和檢查的 Angular Query 開發(fā)工具。

工作演示：

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

以上是使用 TanStack Angular Query 簡化 Angular v 中的 API 呼叫的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！