Client für die Anwendung in Redux

In den vorherigen Lektionen haben wir die Arbeit am Backend für unsere Anwendung praktisch abgeschlossen, wir werden es bei Bedarf in den folgenden Lektionen noch etwas ergänzen. Jetzt müssen wir einen Client für die Anwendung erstellen, der HTTP-Anfragen an den Server sendet.

Öffnen wir unsere Produktanwendung und erstellen Sie im Ordner api die Datei client.js. Zunächst schreiben wir die Funktion client selbst, die sowohl für GET- als auch für POST-Anfragen funktionieren wird. Als Parameter erhält sie den Pfad, den Typ und den Body der Anfrage (im Falle von POST), falls vorhanden:

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

Als nächstes müssen wir das Objekt options bilden, in dem wir verschiedene Informationen für die Anfrage übergeben. Das wird der Anfragetyp und die Header sein:

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

Die Eigenschaft body ist bei uns optional, wir sollten sie nur übergeben, wenn es sich um eine POST-Anfrage handelt. Dazu fügen wir innerhalb von client nach dem Code für das Objekt options dieses zu options mit dem Anfragebody im JSON-Format hinzu, wenn die POST-Methode gewählt wurde:

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

Organisieren wir dann weiter unten im Code von client einen try-Block, in dessen erster Zeile wir mit fetch eine Antwort vom Server erhalten. Im Fehlerfall geben wir traditionell ein Promise mit einem Fehler zurück:

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

Jetzt schreiben wir den Code im try-Block zu Ende. Nach Erhalt der response müssen wir sie verarbeiten. Extrahieren wir die Daten daraus im JSON-Format und wenn der Status der Antwort signalisiert, dass alles in Ordnung ist, geben wir ein Objekt mit den Daten und Informationen zurück: Status, Header und Adresse. Wenn der Status jedoch nicht 'ok' ist, werfen wir eine Ausnahme mit dem StatusText:

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

Der Code für die Funktion client ist fertig, es bleibt nur noch zu schreiben, wie unsere Methoden GET und POST beim Aufruf funktionieren werden. Schreiben wir den Code für sie nach der Funktion client. Die Methode client.get wird den Pfad als Parameter entgegennehmen und die Funktion client aufrufen, indem sie ihr diesen Pfad und den Anfragetyp GET übergibt:

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

Und client.post sollte für client den Pfad, den Anfragetyp POST und den Body der Anfrage übergeben:

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

Das ist alles, unser kleiner Client ist bereit, mit dem Server zu arbeiten.

Öffnen Sie Ihre Studentenanwendung, erstellen Sie in ihrem Ordner api die Datei client.js. Schreiben Sie (kopieren Sie) den Code der Funktion client und ihrer beiden Methoden client.get und client.post, nachdem Sie sich mit den Materialien der Lektion vertraut gemacht haben.