Klijent za aplikaciju u Redux-u

Na prethodnim časovima smo praktično završili rad sa serverskim delom za našu aplikaciju, malo ćemo je dopuniti po potrebi u narednim lekcijama. Sada nam je potrebno da kreiramo klijenta za aplikaciju, koji će slati HTTP zahteve na server.

Otvorimo našu aplikaciju sa proizvodima i u fascikli api kreirajmo fajl client.js. Za početak ćemo napisati samu funkciju client, koja će raditi i za GET i za POST zahteve. Parametrima će primati putanju, tip i telo zahteva (u slučaju POST), ako takvo postoji:

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

Zatim nam je potrebno da formiramo objekat options, u kome ćemo prosleđivati različite informacije za zahtev. To će biti tip zahteva i zaglavlja:

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

Svojstvo body kod nas je opciono, moramo ga proslediti, ako imamo POST-zahtev. Za to unutar client nakon koda za objekat options dodajmo ga u options sa telom zahteva u JSON formatu, ako je odabrana metoda POST:

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

Zatim niže u kodu client organizujmo blok try, u čijem prvom redu pomoću fetch dobićemo odgovor od servera. U slučaju neuspeha tradicionalno ćemo vratiti promis sa greškom:

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

Sada dopišimo kod u bloku try. Nakon dobijanja response, potrebno je da ga obradimo. Izdvojimo iz njega podatke u JSON i ako status odgovora signalizira da je sve u redu, onda vratimo objekat sa podacima i informacijama: statusom, zaglavljima i adresom. Ako je status ne 'ok', onda ćemo baciti izuzetak sa tekstom 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)
}

Kod za funkciju client je gotov, ostalo je samo da napišemo kako će raditi naši metodi GET i POST pri pozivu. Napišimo kod za njih posle funkcije client. Metod client.get će primati kao parametar putanju i pozivaće funkciju client, prosledjujući joj tu putanju i tip zahteva GET:

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

A client.post treba da prosleđuje za client putanju, tip zahteva POST i telo zahteva:

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

Time je sve gotovo, naš mali klijent je spreman za rad sa serverom.

Otvorite vašu aplikaciju sa studentima, kreirajte u njoj u fascikli api fajl client.js. Pregledavši materijale lekcije napišite (kopirajte) kod funkcije client i njena dva metoda client.get i client.post.