Kliendi rakendus Reduxis

Eelmistel tundidel me praktiliselt lõpetasime serveripoole töö meie rakenduse jaoks, me täiendame seda veidi vastavalt vajadusele järgmistes tundides. Nüüd peame looma rakenduse kliendi, mis saadab HTTP-päringud serverisse.

Avame oma tooterakenduse ja kaustas api loome faili client.js. Alustuseks kirjutame funktsiooni client, mis töötab nii GET kui ka POST päringute jaoks. Parameetritena saab see tee, päringu tüübi ja keha (POST puhul), kui see on olemas:

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

Järgmisena peame moodustama objekti options, kus edastame erinevat teavet päringu jaoks. See on päringu tüüp ja päised:

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

Atribuut body on meil valikuline, me peame seda edastama, kui meil on POST-päring. Selleks lisame client sisse pärast options objekti koodi selle options sisse koos päringu kehaga JSON-vormingus, kui valitud on meetod POST:

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

Seejärel korraldame allpool client koodis ploki try, mille esimesel real kasutame fetch, et saada vastus serverilt. Ebaõnnestumise korral tagastame traditsiooniliselt promisi koos veaga:

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

Nüüd lõpetame koodi kirjutamise plokis try. Pärast response saamist peame seda töötlema. Võtame sealt andmed JSONina ja kui vastuse staatus annab märku, et kõik on korras, siis tagastame objekti andmete ja infoga: staatus, päised ja aadress. Kui staatus ei ole 'ok', viskame erindi staatuse tekstiga:

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

Funktsiooni client kood on meil valmis, jääb ainult kirjutada, kuidas meie meetodid GET ja POST töötavad väljakutsumisel. Kirjutame nende jaoks koodi pärast funktsiooni client. Meetod client.get võtab parameetrina tee ja kutsub funktsiooni client, edastades selle tee ja päringutüübi GET:

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

Ja client.post peab edastama client jaoks tee, päringutüübi POST ja päringu keha:

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

Sellega on kõik, meie väike klient on valmis töötamiseks serveriga.

Avage oma õpilaste rakendus, looge selles kaustas api fail client.js. Tutvuge tunnimaterjalidega ja kirjutage (kopeerige) funktsiooni client ja selle kahe meetodi client.get ja client.post kood.