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
Ordine e importanza per @layer in CSS
Implementare il throttling in ASP.NET Core
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Creare gruppi di client per Event Grid MQTT
Code scanning e advanced security con Azure DevOps
Eseguire query verso tipi non mappati in Entity Framework Core
Ordinare randomicamente una lista in C#
Criptare la comunicazione con mTLS in Azure Container Apps
Eseguire operazioni sui blob con Azure Storage Actions
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Definire stili a livello di libreria in Angular