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.