Клиент за приложение в 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)

С това всичко, нашият малък клиент е готов за работа със сървъра.