Ad oggi l'esecuzione di chiamate HTTP in un framework frontend è spesso delegato a librerie e/o componenti interni, i quali cercano di proporre la metodologia più rapida ed efficace per arrivare a eseguire una richiesta HTTP. Per fare un esempio, basta pensare a HttpClient in @angular/common/http per Angular o Axios in Vue.
Tutti questi componenti arrivano a interagire con una funzionalità presente di default all'interno del browser: fetch.
L'utilizzo dell'API fetch non è nuova nei nostri script, l'abbiamo infatti utilizzata per mostrare l'interazione con il mondo asincrono, o per semplici esempi di comunicazione client-server.
Andiamo a vedere più nello specifico di cosa si tratta: attraverso il metodo fetch abbiamo la possibilità di eseguire chiamate verso un endpoint HTTP ottenendo in risposta una Promise. Tale Promise andrà dunque attesa, tramite then/catch o async/await, per poi elaborarne il risultato come mostra il seguente esempio.
fetch('https://dummyjson.com/products') .then(res => res.json()) .then(json => console.log(json.products))
Benchè questo sia il metodo più facile di interazione, abbiamo la possibilità di creare richieste più complesse, impostando il metodo della chiamata, aggiungendo headers o un body; al tempo stesso possiamo controllare lo status code o gli headers della risposta.
fetch('https://dummyjson.com/products/add', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'Computer' }) }) .then(res => { console.log(res.headers.get('Content-Type')) return res.json() }) .then(console.log);
L'API fetch non è utile solo all'interno di un'applicazione, ma può risultare fondamentale in fase di test di una WebAPI: la stessa struttura che abbiamo utilizzato nel nostro codice può essere utilizzata all'interno della console del browser, per verificare manualmente che l'endpoint inserito risponda come desiderato.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Evitare il flickering dei componenti nel prerender di Blazor 8
Hosting di componenti WebAssembly in un'applicazione Blazor static
Controllare gli accessi IP alle app con Azure Container Apps
Utilizzare i primary constructor di C# per inizializzare le proprietà
Elencare le container images installate in un cluster di Kubernetes
Utilizzare le collection expression in C#
Effettuare il binding di date in Blazor
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Gestire undefined e partial nelle reactive forms di Angular
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
I più letti di oggi
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Definire stili a livello di libreria in Angular
- .NET Conference Italia 2023 - Milano e Online
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Ottimizzazione dei block template in Angular 17