Redux тиркемеси үчүн кардар

Өткөн сабактарда биз тиркемебиздин сервердик бөлүгү менен иштөөнү дээрлик аяктадык, кийинки сабактарда керек болгонунда аны бир аз кошумчалайбыз. Азыр бизге серверге HTTP-сурамдарды жөнөтө турган тиркеме үчүн кардарды түзүш керек.

Өнүмдөр менен тиркемебизди ачып, api папкасында client.js файлын түзөбүз. Башында биз client функциясын өзүн жазабыз, ал GET жана POST сурамдары үчүн иштейт. Ал параметрлер катары жолду, типти жана сурамнын денесин (POST учурда), эгерде бар болсо, кабыл алат:

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

Андан кийин биз ар кандай маалыматты берүү үчүн колдоно турган options объектин түзүшүбүз керек. Бул сурамдын тиби жана баштыктары болот:

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

body касиети биз үчүн опционалдуу, биз аны беребиз, эгерде бизде POST-сурам болсо. Бул үчүн client ичинде options объектисинин кодунан кийин, эгерде POST методу тандалса, аны JSON форматындагы сурам денеси менен options кошобуз:

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

Андан кийин төмөн client кодунда биз try блогун уюштурабыз, анын биринчи сабында fetch жардамы менен серверден жооп алабыз. Эгерде ийгиликсиз болсо, биз салттуу түрдө ката менен промис кайтарабыз:

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

Эми try блогундагы коду толуктайлы. response алгандан кийин, биз аны иштетишибиз керек. Андан маалыматты JSON кылып алып, эгерде жооптун статусу баары жакшы экенин билдирсе, анда маалыматтар жана информация бар объектти кайтарабыз: статус, баштыктар жана дарек. Эгерде статус 'ok' болбосо, анда статустун тексти менен исключение чыгарабыз:

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 функциясы үчүн код бизге даяр, калды жөн гана биздин GET жана POST методдор кандайча иштешин жазыш керек. Келгиле client функциясынан кийин алар үчүн код жазалы. client.get методу параметр катары жолду кабыл алып, client функциясын чакырат, ага ушул жолду жана GET сурамынын тибин берүү менен:

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

Ал эми client.post үчүн client жөнөтүшү керек: жол, POST сурамынын тиби жана сурамдын денеси:

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

Ушуну менен бүттү, биздин кичинекей кардар сервер менен иштөөгө даяр.

Студенттер менен тиркемеңизди ачыңыз, анын ичинде api папкасында файл client.js түзүңүз. Сабактын материалдары менен таанышып client функциясынын жана анын эки методунун client.get жана client.post кодуна (көчүрүп) жазыңыз.