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
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
Evitare la script injection nelle GitHub Actions
Gestione dell'annidamento delle regole dei layer in CSS
Utilizzare i primary constructor di C# per inizializzare le proprietà
Eseguire una query su SQL Azure tramite un workflow di GitHub
Utilizzare Model as a Service su Microsoft Azure
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Load test di ASP.NET Core con k6
Generare token per autenicarsi sulle API di GitHub
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8