FetchAPI

Fetch API è una modalità per accedere a risorse remote usando dei meccanismi asincroni anche in maniera semplificata. In questo capitolo faremo uso sia di fetch API che delle istruzioni async await di Javascript. Non è necessario usare async await ma ci semplifica non poco la scrittura dei programmi.

Per fare una richiesta remota è possibile usare il metodofetch() che ha come parametro l'indirizzo della risorsa che vogliamo e ritorna come risultato un oggetto di tipo Promise che di per se indica una operazione che prima o poi verrà completata (è pur sempre una richiesta in rete... ha bisogno di qualche millesimo di secondo!) o fallirà.

È possibile utilizzare l'oggetto Promise ottenuto per indicare cosa va fatto una volta che l'operazione (la comunicaizone in rete nel nostro caso) è terminata ma è più semplice utilizzare l'istruzione await.

let risposta = await fetch("https://x.y.x/risorsa");

await fa in modo che l'esecuzione del nostro script venga sospesa e riprenda soltanto quando la Promise viene completata (sarebbe a dire che la risorsa è arrivata nel caso della fetch). La gestione asincrona in pratica la fa il browser. Da tener presente però che se usiamo await la funzione che contiene questa istruzione va dichiarata come async per marcarla come asincrona.

L'oggetto Promise restituito da fetch() se tutto va bene si risolve in un oggetto di tipo Response quindi nell'esempio sopra risposta è un oggetto Response che tra gli altri ha un comodo metodo json() per convertire il corpo della risposta da JSON ad oggetto.

let oggetto = await risposta.json();

A sua volta il metodo json() restituisce un oggetto Promise che in assenza di errori si risolve in un oggetto javascript che viene costruito in base al testo JSON presente nel corpo della risposta.

Mettendo insieme le parti, una semplice funzione che recupera un oggetto memorizzato su un server remoto potrebbe essere:

async function recuperaInformazioni() { let risposta = await fetch("https://x.y.z/risorsa.json"); let libro = await risposta.json(); console.log(libro.titolo); }

Invio dei dati al server

In metodo fetch() ha in realtà due parametri: il primo è la URL della risorsa che ci interessa (già visto nella sezione precedente) e il secondo è un oggetto che ci permette di specificare alcuni parametri della richiesta tra cui abbiamo:

method: un metodo di HTTP
headers: un oggetto che rappresenta i diversi headers che vogliamo inserire
body: il corpo della richiesta, può essere scritto in diversi formati tra cui anche una stringa di testo (utile per mandare contenuto JSON)

Un caso comune è quello in cui si vuole inviare un oggetto al server per poterlo archiviare rappresentandolo come JSON nel corpo della richiesta. Una possibile soluzione è quella di creare un oggetto specificando il metodo (POST), un header che descrive il media type del corpo (che è in JSON) e il corpo stesso, successivamente si chiama la funzione fetch specificando sia la url del servizio che i parametri appena definiti.

async function recuperaInformazioni() { let parametriRichiesta = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(oggettoDaInviare) }; let risposta = await fetch("https://x.y.z/inserisci",parametriRichiesta); /* ... */ }

Gestione degli errori

Finora abbiamo gestito la comunicazione con fetch API considerando ingenuamente che vada tutto bene: il che però è poco realistico. L'istruzione await in caso che l'oggetto Promise che sta gestendo non si risolve positivamente solleva una eccezione che può essere gestita utilizzando il costrutto try/catch. L'oggetto che rappresenta il problema che si è verificato ha diverse proprietà, due delle quali potrebbero essere utili per capire la natura del problema stesso: name e message.

async function richiestaRealista(){ try{ let risposta = await fetch(URL_ORARI); let oggetto = await risposta.json(); /* ... */ }catch(e){ console.log(e.name); console.log(e.message); } }