Client per l'applicazione in Redux

Nelle lezioni precedenti abbiamo praticamente completato la parte server per la nostra applicazione, la integreremo leggermente secondo necessità nelle prossime lezioni. Ora dobbiamo creare un client per l'applicazione, che invierà richieste HTTP al server.

Apriamo la nostra applicazione con i prodotti e nella cartella api creiamo il file client.js. Per iniziare, scriveremo la funzione client, che funzionerà sia per le richieste GET che per quelle POST. Riceverà come parametri il percorso, il tipo e il corpo della richiesta (nel caso POST), se presente:

export async function client(url, method, body = {}) {}

Successivamente, dobbiamo formare l'oggetto options, in cui passeremo varie informazioni per la richiesta. Questo sarà il tipo di richiesta e gli headers:

export async function client(url, method, body = {}) {
	const options = {
		method: method,
		headers: {
			'Content-Type': 'application/json',
		},
	}
}

La proprietà body per noi è opzionale, dovremmo passarla solo se abbiamo una richiesta POST. Per farlo, all'interno di client, dopo il codice per l'oggetto options, lo aggiungeremo a options con il corpo della richiesta in formato JSON, se il metodo scelto è POST:

if (method === 'POST') {
	options.body = JSON.stringify(body)
}

Poi, più avanti nel codice di client, organizzeremo un blocco try, nella prima riga del quale, utilizzando fetch, otterremo una risposta dal server. In caso di fallimento, tradizionalmente restituiremo una promessa con un errore:

let data
try {
	const response = await window.fetch(url, options)
} catch (err) {
	return Promise.reject(err.message ? err.message : data)
}

Ora completiamo il codice nel blocco try. Dopo aver ottenuto response, dobbiamo elaborarla. Estrarremo da essa i dati in JSON e se lo stato della risposta ci segnala che tutto è a posto, allora restituiremo un oggetto con i dati e le informazioni: stato, headers e indirizzo. Se invece lo stato non è 'ok', allora lanceremo un'eccezione con il testo dello stato:

try {
	const response = await window.fetch(url, options)
	data = await response.json()
	if (response.ok) {
		return {
			status: response.status,
			headers: response.headers,
			url: response.url,
			data,
		}
	}
	throw new Error(response.statusText)
}

Il codice per la funzione client è pronto, resta solo da scrivere come funzioneranno i nostri metodi GET e POST quando vengono chiamati. Scriviamo il codice per loro dopo la funzione client. Il metodo client.get riceverà come parametro il percorso e chiamerà la funzione client, passandole questo percorso e il tipo di richiesta GET:

client.get = (url) => client(url, 'GET')

E client.post dovrà passare a client il percorso, il tipo di richiesta POST e il corpo della richiesta:

client.post = (url, body) => client(url, 'POST', body)

Questo è tutto, il nostro piccolo client è pronto per lavorare con il server.

Aprite la vostra applicazione con gli studenti, create al suo interno nella cartella api il file client.js. Dopo aver preso visione dei materiali della lezione, scrivete (copiate) il codice della funzione client e dei suoi due metodi client.get e client.post.