Klienti për aplikacionin në Redux

Në mësimet e mëparshme pothuajse kemi përfunduar pjesën e serverit për aplikacionin tonë, do ta plotësojmë pak sipas nevojës në mësimet në vijim. Tani na duhet të krijojmë një klient për aplikacionin, i cili do të dërgojë kërkesa HTTP në server.

Le të hapim aplikacionin tonë me produktet dhe në dosjen api të krijojmë skedarin client.js. Për fillim do të shkruajmë vetë funksionin client, i cili do të funksionojë si për kërkesat GET ashtu edhe për ato POST. Si parametra do të marrë rrugën, llojin dhe trupin e kërkesës (në rastin POST), nëse ka të tillë:

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

Më pas duhet të formojmë objektin options, në të cilin do të përcjellim informacione të ndryshme për kërkesën. Ky do të jetë lloji i kërkesës dhe kokat:

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

Prona body tek ne është opsionale, ne duhet ta përcjellim atë, nëse kemi kërkesë POST. Për këtë, brenda client pas kodit për objektin options do ta shtojmë atë në options me trupin e kërkesës në format JSON, nëse zgjidhet metoda POST:

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

Pastaj më poshtë në kodin client do të organizojmë bllokun try, në rreshtin e parë të të cilit me ndihmën e fetch do të marrim përgjigjen nga serveri. Në rast dështimi tradicionalisht do të kthejmë një premtim me gabim:

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

Tani le të plotësojmë kodin në bllokun try. Pas marrjes së response, na duhet ta përpunojmë atë. Le të nxjerrim nga ai të dhënat në JSON dhe nëse statusi i përgjigjes na sinjalizon që gjithçka është në rregull, atëherë do të kthejmë një objekt me të dhënat dhe informacionin: statusin, kokat dhe adresën. Nëse statusi nuk është 'ok', atëherë do të hedhim një përjashtim me tekstin e statusit:

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

Kodi për funksionin client është gati, mbetet vetëm të shkruajmë se si do të funksionojnë metodat tona GET dhe POST kur thirren. Le të shkruajmë kodin për to pas funksionit client. Metoda client.get do të marrë si parametër rrugën dhe do të thërrasë funksionin client, duke ia kaluar asaj këtë rrugë dhe llojin e kërkesës GET:

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

Kurse client.post duhet të përcjellë për client rrugën, llojin e kërkesës POST dhe trupin e kërkesës:

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

Kjo është e gjitha, klienti ynë i vogël është gati për të punuar me serverin.

Hapni aplikacionin tuaj me studentët, krijoni në të në dosjen api skedarin client.js. Pasi u njohët me materialet e mësimit shkruani (kopjoni) kodin e funksionit client dhe dy metodave të tij client.get dhe client.post.