Asiakasohjelma Redux-sovellukseen

Edellisillä tunneilla olemme käytännössä saaneet palvelinpuolen työn sovelluksellemme valmiiksi, hieman täydennämme sitä tarpeen mukaan seuraavissa oppitunneissa. Nyt meidän on luotava sovelluksen asiakasohjelma, joka lähettää HTTP-pyyntöjä palvelimelle.

Avataan tuotesovelluksemme ja luodaan kansioon api tiedosto client.js. Aluksi kirjoitamme itse client-funktion, joka toimii sekä GET- että POST-pyynnöille. Sen parametreina saavat polku, tyyppi ja pyynnön runko (POST-tapauksessa), jos sellainen on:

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

Seuraavaksi meidän on muodostettava options-objekti, jossa välitämme erilaista tietoa pyynnölle. Tämä on pyynnön tyyppi ja otsikot:

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

body-ominaisuutemme on valinnainen, meidän on annettava se, jos meillä on POST-pyyntö. Tätä varten client-funktion sisällä options-objektin koodin jälkeen lisäämme sen options:iin pyynnön rungolla JSON-muodossa, jos POST-metodi on valittu:

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

Sitten alempana client-koodissa järjestämme try-lohkon, jonka ensimmäisellä rivillä fetch:n avulla saamme vastauksen palvelimelta. Epäonnistumisen tapauksessa palautamme perinteisesti promisen virheellä:

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

Kirjoitetaan nyt koodi try-lohkoon. response:n vastaanottamisen jälkeen, meidän täytyy käsitellä se. Puretaan siitä tiedot JSON-muotoon ja jos vastauksen tila signalisoi meille, että kaikki on kunnossa, palautamme objektin tiedoilla ja tiedoilla: tilalla, otsikoilla ja osoitteella. Jos tila ei ole 'ok', heitämme poikkeuksen tilan tekstillä:

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

client-funktion koodi on valmis, vielä täytyy vain kirjoittaa kuinka GET- ja POST-menetelmämme toimivat kutsuttaessa. Kirjoitetaan niiden koodi client-funktion jälkeen. client.get-metodi ottaa parametrina polun ja kutsuu client-funktiota, antaa sille tämän polun ja GET-pyynnön tyypin:

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

Ja client.post:n tulee välittää client:lle polun, POST-pyynnön tyypin ja pyynnön rungon:

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

Siinä kaikki, pieni asiakasohjelmamme on valmis työskentelemään palvelimen kanssa.

Avaa opiskelijasovelluksesi, luo sen api-kansioon api tiedosto client.js. Tutustuttuasi oppitunnin materiaaleihin kirjoita (kopioi) client-funktion koodi ja sen kaksi metodia client.get ja client.post.