Sin dalla prima versione Angular ha esposto la classe Http per effettuare chiamate HTTP. Questa classe soffriva di alcune limitazioni e per poterle superare il team di Angular ha introdotto la nuova classe HttpClient (a partire dala versione 4.3 di Angular) che sostituisce Http rendendola obsoleta (In Angular le classi obsolete vengono eliminate dal codice dopo due major release).
La classe HttpClient può essere iniettata, esattamente come Http, ed espone gli stessi metodi (get, post, head, delete, put, e così via). Questa è l'unica similarità che le due classi hanno in comune. Infatti, le chiamate tramite HttpClient non tornano più il body della risposta, bensì tornano direttamente un oggetto JavaScript (ottenuto parsando il JSON della risposta). Inoltre, HttpClient permette anche una tecnica chiamata interception, cioè la possibilità di inserirsi nella pipeline di esecuzione della richiesta HTTP ed agiungere codice custom. Questa tecnica torna utile quando vogliamo mostrare uno spinner di attesa durante la chiamata HTTP, o per aggiungere un'header di sicurezza o modificare l'URL, per differenziarlo tra i vari ambienti (sviluppo, test, produzione).
Parleremo di queste tecniche in altri script. In questo script vediamo come fare un uso semplice di HttpClient.
import { HttpClient } from '@angular/common/http'; import { Injectable, Inject } from '@angular/core'; @Injectable() export class ProductService { constructor(private http: HttpClient) { } searchProducts(pageIndex: number, pageSize = 10): Promise<Category[]> { return this.http.get<Product[]>( `api/products/categorylist?pageIndex=${(pageIndex || '1')}&itemsPerPage=${pageSize}` ) .toPromise(); } }
In questo esempio ci sono due dettagli da notare:
- il primo è che HttpClient è contenuta nel modulo @angular/common/http;
- il secondo è che i metodi di HttpClient sono tipizzati e tornano un oggetto del tipo dichiarato tramite generics (un array di oggetti product in questo caso);
E' importante ricordare che per usare HttpClient dobbiamo importare il modulo HttpClientModule.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Routing statico e PreRendering in una Blazor Web App
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Eseguire attività basate su eventi con Azure Container Jobs
Verificare la provenienza di un commit tramite le GitHub Actions
.NET Conference Italia 2023
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Creare un'applicazione React e configurare Tailwind CSS
Le novità di Angular: i miglioramenti alla CLI
Sfruttare al massimo i topic space di Event Grid MQTT
Eseguire le GitHub Actions offline
Configurare policy CORS in Azure Container Apps
Limitare le richieste lato server con l'interactive routing di Blazor 8
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)