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
ChatOps con GitHub
Innestare una query nel metodo Contains di Entity Framework Core
Caricare un asset come parte di una release con un workflow di GitHub
.NET 7 Live Q&A
Organizzare i moduli sfruttando CommonJS
Gestire condizioni complesse in JavaScript
Monitorare i server on-premises con Azure Arc
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Abilitare automaticamente Dependabot in tutti i repository di una organizzazione su GitHub
Definire la durata dell'output cache in ASP.NET Core 7
Utilizzare parametri a livello di controller nel routing di ASP.NET Core
Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript