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