# Клиент для приложения в Redux

На прошлых занятиях мы практически завершили работу с серверной частью для нашего приложения, мы немного дополним ее по мере необходимости в следующих уроках. Теперь нам необходимо создать клиента для приложения, который будет отправлять HTTP-запросы на сервер.

Откроем наше приложение с продуктами и в папке `api` создадим файл `client.js`. Для начала мы напишем саму функцию `client`, которая будет работать и для GET и для POST запросов. Параметрами она будет получать путь, тип и тело запроса (в случае POST), если таковое имеется:

`export async function client(url, method, body = {}) {}`

Далее нам нужно сформировать объект `options`, в котором мы будем передавать различную информацию для запроса. Это будет тип запроса и заголовки:

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

Свойство `body` у нас опционально, мы должны передавать его, если у нас POST-запрос. Для этого внутри `client` после кода для объекта `options` добавим его в `options` с телом запроса в формате json, если выбран метод POST:

`if (method === 'POST') { options.body = JSON.stringify(body) }`

Затем ниже в коде `client` организуем блок `try`, в первой строчке которого с помощью `fetch` получим ответ от сервера. В случае неудачи мы традиционно вернем промис с ошибкой:

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

Теперь давайте допишем код в блоке `try`. После получения `response`, нам нужно его обработать. Извлечем из него данные в json и если статус ответа сигнализирует нам, что все в порядке, то вернем объект с данными и информацией: статусом, заголовками и адресом. Если же статус не `'ok'`, то выбросим исключение с текстом статуса:

`try { 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:

`client.get = (url) => client(url, 'GET')`

А `client.post` должен передавать для `client` путь, тип запроса POST и тело запроса:

`client.post = (url, body) => client(url, 'POST', body)`

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

Откройте ваше приложение со студентами, создайте в нем в папке `api` файл `client.js`. Ознакомившись с материалами урока напишите (скопируйте) код функции `client` и двух ее методов `client.get` и `client.post`.

← →
↑