Клијент за апликацију у Redux-у

На претходним часовима смо практично завршили рад на серверском делу наше апликације, мало ћемо га допунити по потреби у следећим лекцијама. Сада нам је потребно да креирамо клијента за апликацију, који ће слати HTTP захтеве на сервер.

Отворимо нашу апликацију са производима и у фасцикли api креирајмо фајл client.js. За почетак ћемо написати саму функцију client, која ће радити и за GET и за POST захтеве. Параметрима ће добијати путању, тип и тело захтева (у случају POST), ако такав постоји:

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

Затим нам треба да формирамо објекат options, у коме ћемо преносити различите информације за захтев. То ће бити тип захтева и заглавља:

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

Својство body код нас је опционално, треба да га пренесемо, ако имамо POST захтев. За то унутар client након кода за објекат options додајмо га у options са телом захтева у формату JSON, ако је изабран метод POST:

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

Затим ниже у коду client организујмо блок try, у првој линији кога ћемо уз помоћ fetch добити одговор од сервера. У случају неуспеха традиционално ћемо вратити промис са грешком:

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

Сада ћемо дописати код у блоку try. Након добијања response, потребно нам је да га обрадимо. Извуцимо из њих податке у JSON и ако статус одговора сигнализира нам да је све у реду, онда вратимо објекат са подацима и информацијом: статусом, заглављима и адресом. Ако није статус 'ok', онда бацимо изузетак са текстом статуса:

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 је спреман, остало је само да напишемо како ће радити наши методи GET и POST приликом позива. Хајде да напишемо код за њих после функције client. Метод client.get ће примати као параметар путању и позиваће функцију client, пренеси јој ову путању и тип захтева GET:

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

А client.post треба да преноси за client путању, тип захтева POST и тело захтева:

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

На томе је крај, наш мали клијент је спреман за рад са сервером.