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