Клијент за апликацију у 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.