Klientas Redux programai

Ankstesnėse pamokose mes beveik užbaigėme darbą su serverine mūsų programos dalimi, šiek tiek ją papildysime pagal poreikį kitose pamokose. Dabar mums reikia sukurti programos klientą, kuris siųs HTTP užklausas į serverį.

Atidarykime mūsų produktų programą ir api aplanke sukurkime failą client.js. Pirmiausia parašysime pačią funkciją client, kuri veiks ir GET, ir POST užklausoms. Kaip parametrus ji gaus kelį, tipą ir užklausos kūną (POST atveju), jei toks yra:

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

Toliau mums reikia suformuoti objektą options, kuriame perduosime įvairią informaciją užklausai. Tai bus užklausos tipas ir antraštės:

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

Savybė body yra pasirinktinė, mes turime ją perduoti, jei turime POST užklausą. Tam viduje client, po objekto options kodo, pridėsime ją į options su užklausos kūnu JSON formatu, jei pasirinktas POST metodas:

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

Tada žemiau client kode organizuosime try bloką, kurio pirmoje eilutėje naudodami fetch gausime atsaką iš serverio. Jei nesiseka, tradiciškai grąžinsime promise su klaida:

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

Dabar užbaikime rašyti kodą try bloke. Gavus response, mums reikia jį apdoroti. Išskirsime iš jo duomenis JSON formatu ir jei atsako statusas mums signalizuoja, kad viskas gerai, tai grąžinsime objektą su duomenimis ir informacija: statusu, antraštėmis ir adresu. Jei statusas nėra 'ok', tai išmesime išimtį su statuso tekstu:

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

Kodas funkcijai client yra paruoštas, liko tik parašyti kaip veiks mūsų GET ir POST metodai iškviečiant. Parašykime kodą jiems po funkcijos client. Metodas client.get kaip parametrą gaus kelią ir iškviečia funkciją client, perduodamas jai šį kelią ir užklausos tipą GET:

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

O client.post turi perduoti client kelią, užklausos tipą POST ir užklausos kūną:

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

Tai viskas, mūsų mažasis klientas paruoštas darbui su serveriu.

Atidarykite savo studentų programą, sukurkite joje api aplanke failą client.js. Susipažinę su pamokos medžiaga parašykite (nukopijuokite) funkcijos client ir dviejų jos metodų client.get ir client.post kodą.