Memperkemas Panggilan API dalam Sudut vdengan TanStack Sudut Pertanyaan

Artikel ini memberikan panduan tentang menggunakan pakej @tanstack/query-angular yang stabil dalam projek Angular v18 untuk panggilan API yang cekap ?

Mengurus interaksi API dalam projek Angular selalunya melibatkan logik berulang, yang membawa kepada pertindihan kod, peningkatan beban penyelenggaraan dan potensi kerumitan pengurusan keadaan. Walaupun @tanstack/angular-query-experimental menawarkan penyelesaian yang mantap, adalah penting untuk ambil perhatian bahawa pakej ini masih dalam pembangunan percubaan. Sebaliknya, untuk projek Angular v17 secara khusus, pertimbangkan untuk menggunakan pakej @tanstack/angular-query-experimental yang stabil.

Faedah Utama TanStack Angular Query:

Pendekatan Deklaratif: Tentukan fungsi pertanyaan yang merangkumi permintaan API dan pemprosesan data yang berkaitan, mempromosikan kod yang bersih dan boleh dibaca.

Caching dan Pengambilan Semula Automatik: Manfaatkan strategi caching terbina dalam seperti "basi semasa pengesahan semula" untuk mengoptimumkan prestasi dan mengurangkan panggilan pelayan yang tidak diperlukan. Laksanakan pengambilan semula data berdasarkan keperluan anda (cth., data basi atau pemfokusan semula tetingkap) untuk ketekalan data yang dipertingkatkan.

Pengendalian Data Reaktif: Akses dan urus data menggunakan pemerhatian dan isyarat, mendayakan kemas kini reaktif dalam komponen UI tanpa cangkuk kitaran hayat manual atau corak pengurusan keadaan yang kompleks.

Reka Bentuk Modular: Susun logik API ke dalam entiti pertanyaan boleh guna semula, mempromosikan organisasi kod dan kebolehselenggaraan.

Dedicated Devtools: Dapatkan cerapan tentang pelaksanaan pertanyaan, keadaan cache dan corak pengambilan semula melalui TanStack Query Devtools, memudahkan penyahpepijatan dan pengoptimuman.

Pemasangan:

Pasang pakej yang diperlukan menggunakan npm atau benang:

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

Langkah demi Langkah Pelaksanaan:

Walaupun @tanstack/angular-query-experimental tersedia untuk Angular v17, ia sedang dalam pembangunan percubaan dan tidak disyorkan untuk kegunaan pengeluaran. Untuk pengurusan panggilan API yang stabil dan boleh dipercayai dalam projek Angular v17, pertimbangkan untuk menggunakan pakej @tanstack/query-angular yang stabil.

Berikut ialah panduan pelaksanaan langkah demi langkah:

1. Tambahkan Pembekal dalam app.config.ts:

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

• Mengimport provideHttpClient, QueryClient, provideAngularQuery.
• Mentakrifkan dan mengeksport objek konfigurasi apl dengan menyediakan penghalaan, HTTP dan kefungsian Pertanyaan Sudut melalui suntikan kebergantungan.

2. Tentukan Jenis berasaskan Typescript untuk respons API:

Jenis digunakan dalam TypeScript untuk menentukan struktur dan jenis data, membantu dalam organisasi kod dan pencegahan ralat. Dalam aplikasi Angular anda, jenis ini berkemungkinan berfungsi sebagai rangka tindakan untuk menstruktur data yang diambil daripada API atau sumber data lain.

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

3. Tentukan Repos.service.ts Perkhidmatan untuk menggunakan panggilan 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)
  ]
};

Perkhidmatan ini bertanggungjawab untuk membuat permintaan HTTP kepada API GitHub untuk mengambil data repositori. Ia menggunakan HttpClient untuk membuat permintaan dan menjangkakan data respons untuk mematuhi struktur yang ditakrifkan dalam jenis Respons.

4. Mulakan Pertanyaan Sudut dalam Komponen github-repo-list.component.ts:

Komponen menggunakan Pertanyaan Sudut untuk mengurus pengambilan data dan caching. Ia menyuntik ReposService untuk membuat panggilan API. Ia mentakrifkan pertanyaan dengan kunci unik 'repoData' untuk mengambil data repositori menggunakan queryFn.

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

5. Mari kita berikan data dalam komponen 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`);
  }
}

• Templat ini secara bersyarat menjadikan kandungan berbeza berdasarkan keadaan pertanyaan: pemuatan, ralat atau kejayaan.
• Ia mengendalikan senario berbeza dengan berkesan, memberikan maklum balas yang sesuai kepada pengguna.
• Ia menggabungkan alat devol Query Sudut untuk nyahpepijat dan pemeriksaan.

Demo Bekerja:

Semak kod sumber lengkap di Github. Terima kasih ?

Atas ialah kandungan terperinci Memperkemas Panggilan API dalam Sudut vdengan TanStack Sudut Pertanyaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!