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:

api/client.jsexport 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:

api/client.jsexport 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:

api/client.jsif (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ä:

api/client.jslet 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ä:

api/client.jstry {
  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:

api/client.jsclient.get = (url) => client(url, 'GET')

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

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

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