Redux应用程序 üçin müşderi

Öňki sapaklarda biz programymyzyň serwer tarapyny işlemegi esasan tamamladyk, indiki sapaklarda zerurlygy ýagdaýynda ony birneme dowam etdireris. Indi biz serwere HTTP haýyşlaryny iberjek bolan programmamyz üçin müşderi dözmeli.

Önümler bilen programmamyzy açalyň we api papkasynyň içinde client.js faýlyny dözdüreliň. Ilki bilen, client funksiýasynyň özini ýazarys, ol hem GET hem-de POST haýyşlary üçin işler. Ol parametr hökmünde ýol, haýyşyň görnüşini we haýyşyň mazmunyny (POST üçin) alar, eger bar bolsa:

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

Indi biz haýyş üçin dürli maglumatlary berjek bolan options obýektini düzmelidiris. Bu haýyşyň görnüşi we ýazgylary boljak:

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

body aýratynlygy bize ýörite, biz ony haýyşymyz POST bolanda bermelidiris. Şuň üçin client funksiýasynyň içinde, options obýekti üçin koddan soň, ony options-a haýyşyň mazmuny bilen JSON formatynda goşarys, eger POST metodi saýlansa:

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

Soňra aşakda client funksiýasynyň kodunda try bloguny guramaly, onuň birinji setirinde fetch ulanyp, serwerden jogaby alarys. Ýalňyşlyk ýüze çykanda, adatdaky ýaly, ýalňyşlyk bilen bir promisi gaýtarys:

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

Indi try blogyna kody dowam etdirip ýazalyň. response alanyňyzdan soň, ony işlemelidiris. Ondan maglumatlary JSON görnüşinde alyp we eger jogabyň statusy bize her zat gowy diýip habar berýän bolsa, onda maglumatlar we maglumat bilen bir obýekti gaýtarys: status, ýazgylar we salgysy. Eger status 'ok' bolmasa, onda statusyň teksti bilen bir ýalňyşlyk çykarys:

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

client funksiýasy üçin kodymyz taýýar, galýar diňe GET we POST metodlarymyzyň çağırlanda nähili işlemelidigini ýazmak. client funksiýasyndan soň olar üçin kody ýazalyň. client.get metodi parametr hökmünde ýoly alyp we client funksiýasyny çagyrmaly, oňa bu ýoly we GET haýyşynyň görnüşini bermeli:

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

client.post bolsa, client üçin ýoly, POST haýyşynyň görnüşini we haýyşyň mazmunyny bermeli:

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

Şuňa çenli, kiçijik müşderimiz serwer bilen işlemäge taýýar.

Talyplyar bilen programmanyzy açyň, oňuň içinde api papkasynyň içinde client.js faýlyny dözdüriň. Sapagyň materiallary bilen tanşanyňyzdan soň (göçürip alyň) client funksiýasynyň we onuň iki metodunyň client.get we client.post koduny ýazyň.