Klient for applikasjon i Redux

I de foregående timene har vi nesten fullført arbeidet med serverdelen for applikasjonen vår, vi vil supplere den litt etter behov i de følgende leksjonene. Nå må vi opprette en klient for applikasjonen som vil sende HTTP-forespørsler til serveren.

La oss åpne applikasjonen vår med produkter og i mappen api opprette filen client.js. Til å begynne med skal vi skrive selve funksjonen client, som vil fungere for både GET- og POST-forespørsler. Den vil ta som parametere stien, typen og forespørselskroppen (i tilfelle POST), hvis noen slik finnes:

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

Deretter må vi opprette et objekt options, der vi vil sende forskjellig informasjon for forespørselen. Dette vil være forespørselstype og headere:

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

Egenskapen body er valgfri for oss, vi bør sende den hvis vi har en POST-forespørsel. For å gjøre dette, inni client, etter koden for objektet options, legger vi den til i options med forespørselskroppen i JSON-format, hvis POST-metoden er valgt:

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

Deretter, lenger ned i koden til client, organiserer vi et try-blokk, i hvis første linje vi ved hjelp av fetch vil motta et svar fra serveren. I tilfelle feil, vil vi tradisjonelt returnere et promise med en feil:

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

La oss nå fullføre koden i try-blokken. Etter å ha mottatt response, må vi behandle den. La oss hente ut dataene fra den i JSON-format, og hvis statuskoden for svaret indikerer at alt er i orden, så returnerer vi et objekt med data og informasjon: status, headere og adresse. Hvis statusen derimot ikke er 'ok', kaster vi et unntak 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 for funksjonen client er klar, det gjenstår bare å skrive hvordan våre GET- og POST-metoder vil fungere ved kall. La oss skrive koden for dem etter funksjonen client. Metoden client.get vil ta som parameter en sti og kalle funksjonen client, og sende den denne stien og forespørselstypen GET:

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

Og client.post skal sende til client stien, forespørselstypen POST og forespørselskroppen:

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

Det var alt, vår lille klient er klar til å jobbe med serveren.

Åpne applikasjonen deres med studenter, opprett i den, i mappen api, filen client.js. Etter å ha sett på materialet fra leksjonen, skriv (eller kopier) koden for funksjonen client og dens to metoder client.get og client.post.