Клиент за приложение в 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.