Klients Redux lietotnei

Iepriekšējās nodarbībās mēs praktiski pabeidzām darbu ar servera daļu mūsu lietotnei, mēs to nedaudz papildinām pēc vajadzības nākamajās nodarbībās. Tagad mums ir nepieciešams izveidot lietotnes klientu, kas sūtīs HTTP pieprasījumus uz serveri.

Atvērsim mūsu lietotni ar produktiem un mapē api izveidosim failu client.js. Sākumā mēs uzrakstīsim pašu funkciju client, kas strādās gan GET, gan POST pieprasījumiem. Tā parametros saņems ceļu, tipu un pieprasījuma saturu (POST gadījumā), ja tāds ir:

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

Tālāk mums ir jāveido objekts options, kurā mēs pārraidīsim dažādu informāciju pieprasījumam. Tas būs pieprasījuma tips un galvenes:

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

Īpašība body mums ir izvēles, mums tas jānodod, ja mums ir POST pieprasījums. Lai to izdarītu, client iekšpusē pēc koda objekta options pievienosim to options ar pieprasījuma saturu JSON formātā, ja izvēlēta metode POST:

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

Pēc tam zemāk client kodā organizēsim bloku try, kura pirmajā rindā ar fetch palīdzību iegūsim atbildi no servera. Neveiksmes gadījumā mēs tradicionāli atgriezīsim promisu ar kļūdu:

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

Tagad papildināsim kodu blokā try. Pēc response saņemšanas, mums tas jāapstrādā. Izgūstam no tā datus JSON formātā un ja atbildes statuss signālis mums, ka viss ir kārtībā, tad atgriežam objektu ar datiem un informāciju: statusu, galvenēm un adresi. Ja statuss nav 'ok', tad izmetam izņēmumu ar statusa 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)
}

Kods funkcijai client ir gatavs, atliek tikai uzrakstīt, kā strādās mūsu metodes GET un POST izsaukumā. Uzrakstīsim kodu tām pēc funkcijas client. Metode client.get saņems kā parametru ceļu un izsauks funkciju client, padodot tai šo ceļu un pieprasījuma tipu GET:

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

Un client.post jānodod client ceļš, pieprasījuma tips POST un pieprasījuma saturs:

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

Ar to viss, mūsu mazais klients ir gatavs darbam ar serveri.

Atveriet savu lietotni ar studentiem, izveidojiet tajā mapē api failu client.js. Iepazīstoties ar nodarbības materiāliem uzrakstiet (nokopējiet) kodu funkcijai client un divām tās metodēm client.get un client.post.