Kliënt vir 'n toepassing in Redux

In vorige lesse het ons feitlik klaar gewerk met die bedienerkant van ons toepassing. Ons sal dit so nodig in die volgende lesse 'n bietjie aanvul. Nou moet ons 'n kliënt skep vir die toepassing wat HTTP-versoeke na die bediener sal stuur.

Laat ons ons produktoepassing oopmaak en in die gids api die lêer client.js skep. Eerstens sal ons die funksie client self skryf, wat vir beide GET- en POST-versoeke sal werk. Dit sal as parameters die pad, tipe en die versoekliggaam (in die geval van 'n POST) ontvang, indien van toepassing:

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

Vervolgens moet ons die objek options saamstel, waarin ons verskillende inligting vir die versoek sal oordra. Dit sal die tipe versoek en die koptekste wees:

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

Die eienskap body is opsioneel vir ons, ons moet dit oordra as ons 'n POST-versoek het. Om dit te doen, voeg ons dit binne client na die kode vir die objek options by in options met die versoekliggaam in JSON-formaat, as die POST-metode gekies is:

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

Dan, laer in die kode van client, reël ons 'n blok try, waarvan ons in die eerste reël met behulp van fetch die antwoord van die bediener sal kry. In die geval van mislukking sal ons tradisioneel 'n belofte met 'n fout terugstuur:

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

Laat ons nou die kode in die blok try voltooi. Nadat ons die response ontvang het, moet ons dit verwerk. Ons sal die data daaruit haal in JSON en as die status van die antwoord ons laat weet dat alles in orde is, dan stuur ons die objek met die data en inligting terug: status, koptekste en adres. As die status egter nie 'ok' is nie, gooi ons 'n uitsondering met die statusteks:

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

Die kode vir die funksie client is nou klaar, dit bly net om te skryf hoe ons GET- en POST-metodes sal werk wanneer dit aangeroep word. Laat ons die kode daarvoor na die funksie client skryf. Die metode client.get sal die pad as parameter neem en die funksie client aanroep, deur hierdie pad en die versoektipe GET aan dit oor te dra:

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

En client.post moet vir client die pad, die versoektipe POST en die versoekliggaam oordra:

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

Dit is alles, ons klein kliënt is gereed om met die bediener te werk.

Maak jou studentetoepassing oop, skep daarin in die gids api die lêer client.js. Nadat jy die lesse se materiaal deurgegaan het, skryf (kopieer) die kode van die funksie client en sy twee metodes client.get en client.post.