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

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

專用開發(fā)工具：通過 TanStack 查詢開發(fā)工具深入了解查詢執(zhí)行、緩存狀態(tài)和重新獲取模式，從而促進調(diào)試和優(yōu)化。

安裝：

使用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 調(diào)用管理，請考慮使用穩(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 功能來定義和導(dǎo)出應(yīng)用程序配置對象。

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

類型在 TypeScript 中用于指定數(shù)據(jù)的結(jié)構(gòu)和類型，有助于代碼組織和錯誤預(yù)防。在您的 Angular 應(yīng)用程序中，此類型可能充當(dāng)構(gòu)建從 API 或其他數(shù)據(jù)源檢索的數(shù)據(jù)的藍圖。

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

3.定義一個Service repos.service.ts來消費API調(diào)用：

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ù)負(fù)責(zé)向 GitHub API 發(fā)出 HTTP 請求以獲取存儲庫數(shù)據(jù)。它使用 HttpClient 發(fā)出請求，并期望響應(yīng)數(shù)據(jù)符合 Response 類型中定義的結(jié)構(gòu)。

4. 在組件 github-repo-list.component.ts 中啟動 Angular Query：

組件使用 Angular Query 來管理數(shù)據(jù)獲取和緩存。它注入 ReposService 來進行 API 調(diào)用。它定義了一個具有唯一鍵“repoData”的查詢，以使用 queryFn 獲取存儲庫數(shù)據(jù)。

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

5. 讓我們在組件 UI github-repo-list.component.html 中渲染數(shù)據(jù)：

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ù)姆答仭?/li>
• 它包含用于調(diào)試和檢查的 Angular Query 開發(fā)工具。

工作演示：

在 Github 上查看完整的源代碼。謝謝？

以上是使用 TanStack Angular Query 簡化 Angular v 中的 API 調(diào)用的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！