Klient pre aplikáciu v Reduxe

Na predchádzajúcich hodinách sme prakticky dokončili prácu so serverovou časťou pre našu aplikáciu, mierne ju doplníme podľa potreby v nasledujúcich lekciách. Teraz je potrebné vytvoriť klienta pre aplikáciu, ktorý bude odosielať HTTP-požiadavky na server.

Otvorme našu aplikáciu s produktami a v priečinku api vytvoríme súbor client.js. Na začiatok napíšeme samotnú funkciu client, ktorá bude fungovať pre GET aj POST požiadavky. Ako parametre bude dostávať cestu, typ a telo požiadavky (v prípade POST), ak taká existuje:

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

Ďalej potrebujeme vytvoriť objekt options, v ktorom budeme odovzdávať rôzne informácie pre požiadavku. Bude to typ požiadavky a hlavičky:

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

Vlastnosť body je u nás voliteľná, musíme ju odovzdávať, ak máme POST-požiadavku. Na to vnútri client po kóde pre objekt options ju pridáme do options s telom požiadavky vo formáte JSON, ak je zvolená metóda POST:

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

Potom nižšie v kóde client zorganizujeme blok try, v ktorého prvom riadku pomocou fetch získame odpoveď od servera. V prípade neúspechu tradične vrátime promis s chybou:

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

Teraz doplňme kód v bloku try. Po získaní response ho potrebujeme spracovať. Extrahujeme z neho údaje v JSON a ak stav odpovede nám signalizuje, že všetko je v poriadku, vrátime objekt s údajmi a informáciami: stavom, hlavičkami a adresou. Ak stav nie je 'ok', vyhodíme výnimku s textom stavu:

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)
}

Kód pre funkciu client je hotový, zostáva iba napísať, ako budú fungovať naše metódy GET a POST pri volaní. Napíšme kód pre ne po funkcii client. Metóda client.get bude prijímať ako parameter cestu a volať funkciu client, odovzdávajúc jej túto cestu a typ požiadavky GET:

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

A client.post má odovzdávať pre client cestu, typ požiadavky POST a telo požiadavky:

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

To je všetko, náš malý klient je pripravený na prácu so serverom.

Otvorte vašu aplikáciu so študentmi, vytvorte v nej v priečinku api súbor client.js. Po oboznámení sa s materiálmi lekcie napíšte (skopírujte) kód funkcie client a jej dvoch metód client.get a client.post.