Client voor de applicatie in Redux

In de vorige lessen hebben we het servergedeelte voor onze applicatie bijna afgerond, we zullen het naar behoefte in de komende lessen nog een beetje aanvullen. Nu is het nodig om een client voor de applicatie te maken, die HTTP-verzoeken naar de server zal sturen.

Laten we onze applicatie met producten openen en in de map api een bestand client.js aanmaken. Om te beginnen schrijven we de functie client zelf, die zal werken voor zowel GET- als POST-verzoeken. Als parameters krijgt het het pad, het type en de body van het verzoek (in het geval van POST), indien aanwezig:

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

Vervolgens moeten we het object options vormen, waarin we verschillende informatie voor het verzoek zullen doorgeven. Dit zal het type verzoek en de headers zijn:

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

De eigenschap body is optioneel voor ons, we moeten het doorgeven als we een POST-verzoek hebben. Hiervoor voegen we binnen client, na de code voor het object options, het toe aan options met de body van het verzoek in JSON-formaat, als de POST-methode is geselecteerd:

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

Vervolgens organiseren we in de code van client hieronder een try blok, in de eerste regel zullen we met behulp van fetch een antwoord van de server krijgen. In het geval van een fout keren we traditioneel een promise met een foutmelding terug:

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

Laten we nu de code in het try blok afmaken. Na het verkrijgen van response, moeten we het verwerken. We halen de gegevens eruit in JSON en als de status van het antwoord ons signaleert dat alles in orde is, dan keren we een object terug met de gegevens en informatie: status, headers en adres. Als de status niet 'ok' is, dan gooien we een uitzondering met de statustekst:

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

De code voor de functie client is klaar, het resterende is alleen om te schrijven hoe onze methodes GET en POST zullen werken bij aanroep. Laten we de code voor hen schrijven na de functie client. De methode client.get zal als parameter het pad accepteren en de functie client aanroepen, waarbij het dit pad en het type verzoek GET doorgeeft:

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

En client.post moet voor client het pad, het type verzoek POST en de body van het verzoek doorgeven:

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

Dat is alles, onze kleine client is klaar om te werken met de server.

Open je applicatie met studenten, maak erin in de map api een bestand client.js aan. Na bestudering van de materialen van de les, schrijf (kopieer) de code van de functie client en zijn twee methodes client.get en client.post.