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
Personalizzare le richieste con i rule set di Azure Front Door
Confronto tra moduli in Javascript: ES e commonJS
Utilizzare i WebSocket con Azure API Management
Ottimizzare serializzazione e deserializzaione tramite le options con System.Text.Json
Utilizzo di Map e Object in Javascript
Leggere e scrivere su cookie tramite Blazor
Parallelizzare le chiamate HTTP con async/await e le Promise in JavaScript
Ottimizzare il codice JavaScript utilizzando WeakMap e WeakSet
Impostare il forward degli header in un sito ASP.NET Core dietro a un reverse proxy
Monitorare metriche delle risorse Azure con Load Testing
Gestire condizioni complesse in JavaScript
Gestire il breaking change di Entity Framework Core 7 con tabelle che usano identity e trigger
I più letti di oggi
- Linting di un Dockerfile con un workflow di GitHub
- Sfruttare la local cache del browser tramite gli ETag in #aspnetcore https://aspit.co/cfc di @crad77 #webapi #aspnetmvc #blazor #cache
- Monitorare i server on-premises con Azure Arc
- 3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2