Klient til applikation i Redux

I de foregående lektioner afsluttede vi næsten arbejdet med serverdelen til vores applikation, vi vil tilføje lidt mere efter behov i de følgende lektioner. Nu er vi nødt til at skabe en klient til applikationen, som vil sende HTTP-anmodninger til serveren.

Lad os åbne vores applikation med produkter og i mappen api oprette filen client.js. Til at starte med vil vi skrive selve funktionen client, som vil arbejde for både GET og POST anmodninger. Den vil modtage stien, typen og anmodningens krop (i tilfælde af POST) som parametre, hvis der er nogen:

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

Dernæst skal vi danne et objekt options, hvor vi vil overføre forskellig information til anmodningen. Dette vil være anmodningstypen og headere:

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

Egenskaben body er valgfri for os, vi bør overføre den, hvis vi har en POST-anmodning. For at gøre dette, tilføjer vi den i options med anmodningens krop i JSON-format efter koden for objektet options inde i client, hvis POST-metoden er valgt:

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

Dernæst organiserer vi en try-blok i client-koden nedenfor, hvor vi i den første linje ved hjælp af fetch vil modtage et svar fra serveren. I tilfælde af fiasko vil vi traditionelt returnere et promise med en fejl:

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

Lad os nu skrive koden færdig i try-blokken. Efter at have modtaget response, skal vi behandle den. Lad os udtrække dataene fra den i JSON, og hvis svarets status signalerer til os, at alt er i orden, så returnerer vi et objekt med data og information: status, headere og adresse. Hvis statusen derimod ikke er 'ok', så kaster vi en undtagelse med statusteksten:

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 til funktionen client er færdig, det eneste der mangler er at skrive, hvordan vores GET- og POST-metoder vil fungere, når de kaldes. Lad os skrive koden til dem efter funktionen client. Metoden client.get vil modtage stien som parameter og kalde funktionen client, hvori den overfører denne sti og anmodningstypen GET:

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

Og client.post skal overføre client stien, anmodningstypen POST og anmodningens krop:

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

Det var alt, vores lille klient er klar til at arbejde med serveren.

Åbn din applikation med studerende, opret filen client.js i mappen api i den. Efter at have gennemgået lektionens materiale, skal du skrive (kopiere) koden til funktionen client og dens to metoder client.get og client.post.