Odjemalec za aplikacijo v Redux

V prejšnjih lekcijah smo praktično zaključili delo s strežniškim delom za našo aplikacijo, malo ga bomo dopolnili po potrebi v naslednjih lekcijah. Zdaj moramo ustvariti odjemalca za aplikacijo, ki bo pošiljal HTTP zahteve na strežnik.

Odprimo našo aplikacijo s produkti in v mapi api ustvarimo datoteko client.js. Za začetek bomo napisali samo funkcijo client, ki bo delovala tako za GET kot za POST zahteve. Kot parametre bo sprejela pot, tip in telo zahteve (v primeru POST), če obstaja:

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

Nato moramo oblikovati objekt options, v katerem bomo posredovali različne informacije za zahtevo. To je tip zahteve in glave:

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

Lastnost body je pri nas opcijska, moramo jo posredovati, če imamo POST zahtevo. Za to dodajmo znotraj client po kodi za objekt options v options s telesom zahteve v formatu JSON, če je izbrana metoda POST:

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

Nato nato v kodi client organizirajmo blok try, v prvi vrstici katerega bomo s pomočjo fetch dobili odgovor od strežnika. V primeru neuspeha bomo tradicionalno vrnili promis z napako:

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

Zdaj dopišimo kodo v bloku try. Po prejemu response, ga moramo obdelati. Izvlečimo iz njega podatke v JSON in če status odgovora nam signalizira, da je vse v redu, potem vrnimo objekt s podatki in informacijami: statusom, glavami in naslovom. Če pa status ni 'ok', potem vržimo izjemo s besedilom statusa:

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

Koda za funkcijo client je pripravljena, preostane samo še napisati, kako bodo delale naše metode GET in POST pri klicu. Napišimo kodo zanje po funkciji client. Metoda client.get bo sprejela kot parameter pot in klicala funkcijo client, ki ji posreduje to pot in tip zahteve GET:

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

client.post pa mora posredovati za client pot, tip zahteve POST in telo zahteve:

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

To je vse, naš majhen odjemalec je pripravljen za delo s strežnikom.

Odprite vašo aplikacijo s študenti, ustvarite v njej v mapi api datoteko client.js. Po seznanitvi z gradivom lekcije napišite (kopirajte) kodo funkcije client in njenih dveh metod client.get in client.post.