Kliens az alkalmazáshoz a Reduxban

Az előző órákon gyakorlatilag befejeztük alkalmazásunk szerveroldali részének munkálatait, egy kicsit kiegészítjük szükség szerint a következő leckékben. Most létre kell hoznunk az alkalmazás kliensét, amely HTTP-kéréseket fog küldeni a szerverre.

Nyissuk meg a termékekkel kapcsolatos alkalmazásunkat és a api mappában hozzunk létre egy client.js fájlt. Kezdetben megírjuk magát a client függvényt, amely mind GET, mind pedig POST kérések esetén működni fog. Paraméterként megkapja az útvonalat, a típust és a kérés törzsét (POST esetén), ha van ilyen:

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

Ezután létre kell hoznunk egy options objektumot, amelyben különböző információkat fogunk átadni a kéréshez. Ez lesz a kérés típusa és a fejlécek:

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

A body tulajdonságunk opcionális, csak akkor kell átadnunk, ha POST-kérésről van szó. Ehhez a client függvényen belül, az options objektum létrehozása után adjuk hozzá az options-hoz a kérés törzsét JSON formátumban, ha a POST metódus van kiválasztva:

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

Ezután a client függvényben, lentebb szervezzünk egy try blokkot, amelynek első sorában a fetch segítségével megkapjuk a választ a szervertől. Sikertelenség esetén hagyományosan egy promiset adunk vissza hibával:

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

Most írjuk meg a kódot a try blokkban. A response megérkezése után feldolgoznunk kell. Kinyerjük belőle az adatokat JSON formátumban, és ha a válasz státusza jelezni számunkra, hogy minden rendben van, akkor visszaadjuk az adatokat és információkat tartalmazó objektumot: státusz, fejlécek és cím. Ha viszont a státusz nem 'ok', akkor dobjunk kivételt a státusz szövegével:

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

A client függvény kódja kész, már csak az van hátra, hogy megírjuk, hogyan fognak működni a GET és POST metódusaink a hívás során. Írjuk meg a kódot rájuk a client függvény után. A client.get metódus paraméterként az útvonalat fogja venni, és meghívja a client függvényt, átadva neki ezt az útvonalat és a GET kérés típusát:

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

A client.post-nak pedig át kell adnia a client számára az útvonalat, a POST kérés típusát és a kérés törzsét:

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

Ezzel végeztünk, a kis kliensünk kész a szerverrel való munkára.

Nyissa meg a diákokkal kapcsolatos alkalmazását, hozzon létre benne a api mappában egy client.js fájlt. A lecke anyagainak megismerése után írja (másolja) be a client függvény és két metódusának, a client.get és a client.post kódját.