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

На этом все, наш маленький клиент готов к работе с сервером.