Client pentru aplicația în Redux

În lecțiile anterioare am aproape terminat cu partea de server pentru aplicația noastră, o vom completa puțin după cum este necesar în lecțiile următoare. Acum trebuie să creăm clientul pentru aplicație, care va trimite cereri HTTP către server.

Să deschidem aplicația noastră cu produse și în folderul api să creem fișierul client.js. Pentru început vom scrie funcția client, care va funcționa atât pentru cereri GET cât și POST. Ca parametri va primi calea, tipul și corpul cererii (în cazul POST), dacă există:

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

În continuare trebuie să formăm obiectul options, în care vom transmite diverse informații pentru cerere. Acesta va fi tipul cererii și antetele:

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

Proprietatea body este opțională pentru noi, trebuie să o transmitem doar dacă avem o cerere POST. Pentru aceasta, în interiorul client după codul pentru obiectul options îl vom adăuga în options cu corpul cererii în format JSON, dacă este selectată metoda POST:

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

Apoi, mai jos în codul client vom organiza blocul try, în prima linie a căruia cu ajutorul fetch vom primi răspunsul de la server. În cazul unei eșecuri vom returna în mod tradițional o promisiune cu eroarea:

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

Acum să completăm codul în blocul try. După primirea response, trebuie să-l procesăm. Vom extrage din el datele în JSON și dacă statusul răspunsului ne semnalează că totul este în regulă, atunci vom returna un obiect cu datele și informațiile: statusul, antetele și adresa. Dacă statusul nu este 'ok', atunci vom arunca o excepție cu textul statusului:

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

Codul pentru funcția client este gata, rămâne doar să scriem cum vor funcționa metodele noastre GET și POST la apelare. Să scriem codul pentru ele după funcția client. Metoda client.get va primi ca parametru calea și va apela funcția client, transmițându-i această cale și tipul cererii GET:

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

Iar client.post trebuie să transmită către client calea, tipul cererii POST și corpul cererii:

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

Cu aceasta, totul este gata, micul nostru client este gata pentru a lucra cu serverul.

Deschideți aplicația voastră cu studenți, creați în ea în folderul api fișierul client.js. Familiarizându-vă cu materialele lecției scrieți (copiați) codul funcției client și a celor două metode ale sale client.get și client.post.