Klient pro aplikaci v Reduxu

Na minulých lekcích jsme prakticky dokončili práci se serverovou částí naší aplikace, ještě ji trochu doplníme podle potřeby v následujících lekcích. Nyní potřebujeme vytvořit klienta pro aplikaci, který bude odesílat HTTP požadavky na server.

Otevřeme naši aplikaci s produkty a v složce api vytvoříme soubor client.js. Pro začátek napíšeme samotnou funkci client, která bude fungovat jak pro GET, tak pro POST požadavky. Jako parametry bude přijímat cestu, typ a tělo požadavku (v případě POST), pokud nějaké existuje:

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

Dále potřebujeme vytvořit objekt options, ve kterém budeme předávat různé informace pro požadavek. To bude typ požadavku a hlavičky:

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

Vlastnost body je u nás volitelná, měli bychom ji předávat, pokud máme POST požadavek. K tomu uvnitř client po kódu pro objekt options ji přidáme do options s tělem požadavku ve formátu JSON, pokud je zvolena metoda POST:

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

Poté níže v kódu client uspořádáme blok try, v jehož prvním řádku pomocí fetch získáme odpověď od serveru. V případě neúspěchu tradičně vrátíme promis s chybou:

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

Nyní doplňme kód v bloku try. Po obdržení response je potřeba jej zpracovat. Extrahujeme z něj data ve formátu JSON a pokud status odpovědi nám signalizuje, že je vše v pořádku, vrátíme objekt s daty a informacemi: statusem, hlavičkami a adresou. Pokud však status není 'ok', vyhodíme výjimku s textem statusu:

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 pro funkci client je hotov, zbývá jen napsat, jak budou fungovat naše metody GET a POST při volání. Napišme kód pro ně za funkcí client. Metoda client.get bude přijímat jako parametr cestu a volat funkci client, předávat jí tuto cestu a typ požadavku GET:

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

A client.post by měl předávat pro client cestu, typ požadavku POST a tělo požadavku:

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

To je vše, náš malý klient je připraven práci se serverem.

Otevřete vaši aplikaci se studenty, vytvořte v ní v složce api soubor client.js. Seznámíte-li se s materiály lekce, napište (zkopírujte) kód funkce client a jejích dvou metod client.get a client.post.