Klient för applikation i Redux

I tidigare lektioner har vi nästan avslutat arbetet med serverdelen för vår applikation, vi kommer att komplettera den lite vid behov i kommande lektioner. Nu behöver vi skapa en klient för applikationen som kommer att skicka HTTP-förfrågningar till servern.

Låt oss öppna vår applikation med produkter och i mappen api skapa filen client.js. Till att börja med kommer vi att skriva själva funktionen client, som kommer att fungera för både GET och POST-förfrågningar. Den kommer att ta som parametrar sökväg, typ och förfrågans body (i fallet med POST), om sådan finns:

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

Därefter behöver vi skapa objektet options, där vi kommer att skicka olika information för förfrågan. Detta kommer att vara förfrågningstyp och headers:

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

Egenskapen body är valfri för oss, vi bör skicka den om vi har en POST-förfrågan. För att göra detta, lägg till den i options med förfrågans body i JSON-format efter koden för objektet options inuti client, om POST-metoden är vald:

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

Sedan, längre ner i koden för client, skapar vi ett try-block, där vi på första raden med hjälp av fetch får ett svar från servern. Vid misslyckande returnerar vi traditionellt ett promise med ett fel:

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

Låt oss nu skriva klart koden i try-blocket. Efter att ha fått response behöver vi behandla den. Låt oss extrahera data från den i JSON-format och om statuskoden för svaret signalerar att allt är i ordning, så returnerar vi ett objekt med data och information: status, headers och adress. Om statusen däremot inte är 'ok', så kastar vi ett undantag med status-texten:

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

Koden för funktionen client är klar, det återstår bara att skriva hur våra GET- och POST-metoder kommer att fungera när de anropas. Låt oss skriva koden för dem efter funktionen client. Metoden client.get kommer att ta som parameter en sökväg och anropa funktionen client, skicka den denna sökväg och förfrågningstypen GET:

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

Och client.post bör skicka till client sökväg, förfrågningstyp POST och förfrågans body:

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

Det var allt, vår lilla klient är redo att arbeta med servern.

Öppna din applikation med studenter, skapa i den i mappen api filen client.js. Efter att ha tagit del av materialet i lektionen, skriv (kopiera) koden för funktionen client och dess två metoder client.get och client.post.