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