Кліент для прыкладання ў 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)

На гэтым усё, наш маленькі кліент гатовы да працы з серверам.