Кліент для прыкладання ў 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 дадамо яго ў options з целам запыту ў фармаце JSON, калі абраны метад POST:

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.