Optimieren Sie API-Aufrufe in Angular v mit TanStack Angular Query

Dieser Artikel bietet Anleitungen zur Verwendung des stabilen @tanstack/query-angular-Pakets in Angular v18-Projekten für effiziente API-Aufrufe ?

Die Verwaltung von API-Interaktionen in Angular-Projekten erfordert häufig sich wiederholende Logik, was zu Codeduplizierung, erhöhtem Wartungsaufwand und potenzieller Komplexität bei der Zustandsverwaltung führt. Obwohl @tanstack/angular-query-experimental eine robuste Lösung bietet, ist es wichtig zu beachten, dass sich dieses Paket noch in der experimentellen Entwicklung befindet. Erwägen Sie stattdessen speziell für Angular v17-Projekte die Verwendung des stabilen Pakets @tanstack/angular-query-experimental.

Hauptvorteile von TanStack Angular Query:

Deklarativer Ansatz: Definieren Sie Abfragefunktionen, die API-Anfragen und die damit verbundene Datenverarbeitung kapseln und so sauberen und lesbaren Code fördern.

Automatisches Caching und erneutes Abrufen: Nutzen Sie integrierte Caching-Strategien wie „Stale-While-Revalidate“, um die Leistung zu optimieren und unnötige Serveraufrufe zu reduzieren. Implementieren Sie das erneute Abrufen von Daten basierend auf Ihren Anforderungen (z. B. veraltete Daten oder Neuausrichtung des Fensters), um die Datenkonsistenz zu verbessern.

Reaktive Datenverarbeitung: Zugriff auf und Verwaltung von Daten mithilfe von Observablen und Signalen, wodurch reaktive Aktualisierungen in UI-Komponenten ohne manuelle Lebenszyklus-Hooks oder komplexe Zustandsverwaltungsmuster ermöglicht werden.

Modularer Aufbau: API-Logik in wiederverwendbaren Abfrageeinheiten organisieren und so die Codeorganisation und Wartbarkeit fördern.

Dedizierte Devtools: Erhalten Sie Einblicke in die Abfrageausführung, den Cache-Status und die erneuten Abrufmuster durch die TanStack Query Devtools und erleichtern Sie so das Debuggen und Optimieren.

Installation:

Installieren Sie die erforderlichen Pakete mit npm oder Yarn:

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

Schritt-für-Schritt-Umsetzung:

Obwohl @tanstack/angular-query-experimental für Angular v17 verfügbar ist, befindet es sich derzeit in der experimentellen Entwicklung und wird nicht für den Produktionseinsatz empfohlen. Für eine stabile und zuverlässige API-Aufrufverwaltung in Angular v17-Projekten sollten Sie die Verwendung des stabilen @tanstack/query-angular-Pakets in Betracht ziehen.

Hier ist eine Schritt-für-Schritt-Anleitung zur Implementierung:

1. Anbieter in app.config.ts hinzufügen:

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

• Importieren von ProvideHttpClient, QueryClient, ProvideAngularQuery.
• Definieren und Exportieren des App-Konfigurationsobjekts durch Bereitstellung von Routing-, HTTP- und Angular Query-Funktionalität durch Abhängigkeitsinjektion.

2. Definieren Sie einen Typescript-basierten Typ für die API-Antwort:

Typen werden in TypeScript verwendet, um die Struktur und Art von Daten anzugeben und so bei der Codeorganisation und Fehlervermeidung zu helfen. Innerhalb Ihrer Angular-Anwendung dient dieser Typ wahrscheinlich als Blaupause für die Strukturierung von Daten, die von einer API oder einer anderen Datenquelle abgerufen werden.

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

3. Definieren Sie einen Dienst repos.service.ts, um den API-Aufruf zu nutzen:

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

Der Dienst ist dafür verantwortlich, HTTP-Anfragen an die GitHub-API zu stellen, um Repository-Daten abzurufen. Es verwendet den HttpClient, um die Anforderungen zu stellen, und erwartet, dass die Antwortdaten der im Antworttyp definierten Struktur entsprechen.

4. Initiieren Sie Angular Query in der Komponente github-repo-list.component.ts:

Component verwendet Angular Query, um das Abrufen und Zwischenspeichern von Daten zu verwalten. Es injiziert den ReposService, um API-Aufrufe durchzuführen. Es definiert eine Abfrage mit dem eindeutigen Schlüssel „repoData“, um Repository-Daten mithilfe von queryFn abzurufen.

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

5. Lassen Sie uns die Daten in der Komponenten-Benutzeroberfläche github-repo-list.component.html rendern:

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

• Diese Vorlage rendert bedingt unterschiedliche Inhalte basierend auf dem Status der Abfrage: Laden, Fehler oder Erfolg.
• Es bewältigt effektiv verschiedene Szenarien und gibt dem Benutzer entsprechendes Feedback.
• Es enthält Angular Query-Devtools zum Debuggen und Überprüfen.

Arbeitsdemo:

Schauen Sie sich den vollständigen Quellcode bei Github an. Danke ?

Das obige ist der detaillierte Inhalt vonOptimieren Sie API-Aufrufe in Angular v mit TanStack Angular Query. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!