Klient dla aplikacji w Redux

Na poprzednich zajęciach praktycznie zakończyliśmy pracę z częścią serwerową dla naszej aplikacji, nieco uzupełnimy ją w miarę potrzeby w kolejnych lekcjach. Teraz musimy stworzyć klienta dla aplikacji, który będzie wysyłał żądania HTTP na serwer.

Otwórzmy naszą aplikację z produktami i w folderze api utwórzmy plik client.js. Na początek napiszemy samą funkcję client, która będzie działać zarówno dla żądań GET, jak i POST. Jako parametry będzie otrzymywać ścieżkę, typ i treść żądania (w przypadku POST), jeśli taka istnieje:

export async function client(url, method, body = {}) {}

Następnie musimy utworzyć obiekt options, w którym będziemy przekazywać różne informacje dla żądania. Będzie to typ żądania i nagłówki:

export async function client(url, method, body = {}) {
	const options = {
		method: method,
		headers: {
			'Content-Type': 'application/json',
		},
	}
}

Właściwość body jest u nas opcjonalna, musimy ją przekazywać, jeśli mamy żądanie POST. W tym celu wewnątrz client, po kodzie dla obiektu options, dodajmy ją do options z treścią żądania w formacie JSON, jeśli wybrana jest metoda POST:

if (method === 'POST') {
	options.body = JSON.stringify(body)
}

Następnie poniżej w kodzie client zorganizujmy blok try, w pierwszej linii którego za pomocą fetch otrzymamy odpowiedź od serwera. W przypadku niepowodzenia tradycyjnie zwrócimy promis z błędem:

let data
try {
	const response = await window.fetch(url, options)
} catch (err) {
	return Promise.reject(err.message ? err.message : data)
}

Teraz dokończmy kod w bloku try. Po otrzymaniu response, musimy go przetworzyć. Wyodrębnijmy z niego dane w JSON i jeśli status odpowiedzi sygnalizuje nam, że wszystko w porządku, to zwrócimy obiekt z danymi i informacjami: statusem, nagłówkami i adresem. Jeśli zaś status nie jest 'ok', to wyrzućmy wyjątek z tekstem statusu:

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)
}

Kod dla funkcji client jest gotowy, pozostało tylko napisać, jak będą działać nasze metody GET i POST przy wywołaniu. Napiszmy kod dla nich po funkcji client. Metoda client.get będzie przyjmować jako parametr ścieżkę i wywoływać funkcję client, przekazując jej tę ścieżkę i typ żądania GET:

client.get = (url) => client(url, 'GET')

A client.post powinien przekazywać dla client ścieżkę, typ żądania POST i treść żądania:

client.post = (url, body) => client(url, 'POST', body)

To wszystko, nasz mały klient jest gotowy do pracy z serwerem.

Otwórz twoją aplikację ze studentami, utwórz w niej w folderze api plik client.js. Zapoznawszy się z materiałami lekcji napisz (skopiuj) kod funkcji client i jej dwóch metod client.get i client.post.