Klijent za aplikaciju u Redux-u

Na prethodnim časovima smo praktično završili rad sa serverskim delom za našu aplikaciju, malo ćemo je dopuniti po potrebi u narednim lekcijama. Sada nam je potrebno da kreiramo klijenta za aplikaciju, koji će slati HTTP zahteve na server.

Otvorimo našu aplikaciju sa proizvodima i u fascikli api kreirajmo fajl client.js. Za početak ćemo napisati samu funkciju client, koja će raditi i za GET i za POST zahteve. Parametrima će primati putanju, tip i telo zahteva (u slučaju POST), ako takvo postoji:

api/client.jsexport async function client(url, method, body = {}) {}

Zatim nam je potrebno da formiramo objekat options, u kome ćemo prosleđivati različite informacije za zahtev. To će biti tip zahteva i zaglavlja:

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

Svojstvo body kod nas je opciono, moramo ga proslediti, ako imamo POST-zahtev. Za to unutar client nakon koda za objekat options dodajmo ga u options sa telom zahteva u JSON formatu, ako je odabrana metoda POST:

api/client.jsif (method === 'POST') {
  options.body = JSON.stringify(body)
}

Zatim niže u kodu client organizujmo blok try, u čijem prvom redu pomoću fetch dobićemo odgovor od servera. U slučaju neuspeha tradicionalno ćemo vratiti promis sa greškom:

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

Sada dopišimo kod u bloku try. Nakon dobijanja response, potrebno je da ga obradimo. Izdvojimo iz njega podatke u JSON i ako status odgovora signalizira da je sve u redu, onda vratimo objekat sa podacima i informacijama: statusom, zaglavljima i adresom. Ako je status ne 'ok', onda ćemo baciti izuzetak sa tekstom statusa:

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

Kod za funkciju client je gotov, ostalo je samo da napišemo kako će raditi naši metodi GET i POST pri pozivu. Napišimo kod za njih posle funkcije client. Metod client.get će primati kao parametar putanju i pozivaće funkciju client, prosledjujući joj tu putanju i tip zahteva GET:

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

A client.post treba da prosleđuje za client putanju, tip zahteva POST i telo zahteva:

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

Time je sve gotovo, naš mali klijent je spreman za rad sa serverom.