Axios

1.

Проектирование и разработка веб-приложений. Лекция 4.
Axios
Особенности. Запросы. Параметры.
Москва, 2025

2.

Повестка дня
Основы
Особенности
Подключение к серверу
Параметры
Запросы
Ответ
Пример вызова
Задание

3.

Axios
npm install axios
const axios = require('axios');
Axios - это HTTP-клиент, основанный на Promise для node.js и браузера.
На стороне сервера он использует нативный node.js http-модуль, тогда как на стор
3

4.

Особенности
Делает http запросы из node.js
Поддерживает Promise API
Перехватывает запросы и ответы
Преобразовывает данные запроса и ответа
Отменяет запросы
Делает XMLHttpRequests запросы из браузера
Автоматическое преобразование для JSON-данных
Поддержка на стороне клиента для защиты от XSRF
4

5.

Подключение к серверу
import axios from "axios";
export const $host = axios.create({
baseURL: 'http://localhost:3333/'
})
export const $authHost = axios.create({
baseURL: 'http://localhost:3333/' //process.env.REACT_APP_API_URL
})
const authInterceptor = config => {
config.headers.authorization = `Bearer ${localStorage.getItem('token')}`;
return config;
}
$authHost.interceptors.request.use(authInterceptor);
5

6.

Параметры запроса
url: ‘/user',
// `url` - URL-адрес сервера, который будет использоваться для запроса
method: ‘get', // значение по умолчанию, method` - это метод запроса, который следует использовать при подаче запроса
baseURL: ‘https://some-domain.com/api',
// `baseURL` будет добавляться `url`, если `url` не является абсолютным
transformRequest: [function (data, headers) { // `transformRequest`позволяет изменять данные запроса перед его отправкой на сервер
// Любое преобразование данных, применимо только для методов запроса 'PUT', 'POST', 'PATCH' и 'DELETE'
return data; // Последняя функция в массиве должна возвращать строку или экземпляр Buffer, ArrayBuffer, FormData или Stream
}], // Вы можете изменить объект headers
transformResponse: [function (data) { // `transformResponse` позволяет вносить изменения в данные ответа перед их передачей then/catch
// Любое преобразование данных
return data;
}],
params: { ID: 12345 }, // `params` - это URL-параметры, которые отправляются вместе с запросом (query)
data: { // `data` - это данные, которые посылаются как тело запроса
firstName: ‘Elise'
}, // Применяется только к методам запроса 'PUT', 'POST', 'DELETE , and ‘PATCH'
data: для
'Country=Brasil&City=Belo
Horizonte',
headers: {'X-Requested-With': ‘XMLHttpRequest’} // `headers` - это пользовательские заголовки
запроса
6

7.

Дополнительные параметры запроса
timeout: 1000, // по умолчанию `0` (без времени ожидания), `timeout` указывает количество миллисекунд до истечения времени ожидания запроса
auth: { // `auth` указывает, что следует использовать базовую аутентификацию HTTP, и предоставляет учетные данные
username: ‘postgres',
password: ‘12345678'
},
//Для токенов Bearer и т. д. вместо этого используйте пользовательский заголовок `Authorization`
responseType: 'json', // по умолчанию — `responseType` указывает тип данных, на которые будет отвечать сервер
responseEncoding: 'utf8', // по умолчанию — `responseEncoding` указывает кодирование для декодирования ответов
maxContentLength: 2000,
// `maxContentLength` определяет максимальный размер содержимого ответа http в байтах, разрешенный в node.js
maxBodyLength: 2000, // `maxBodyLength` (Только для Node.js) определяет максимальный разрешенный размер содержимого HTTP-запроса в байтах
onUploadProgress: function (progressEvent) { // `onUploadProgress` позволяет обрабатывать события прогресса загрузки
// Любое преобразование данных c событием прогресса
},
onDownloadProgress: function (progressEvent) { // `onDownloadProgress` позволяет обрабатывать события прогресса скачивания
// Любое преобразование данных c событием прогресса
},
cancelToken: new CancelToken(function (cancel) { // `cancelToken` указывает токен отмены, который можно использовать для отмены запроса
}),
decompress: true // по умолчанию — `decompress` указывает, следует ли распаковывать тело ответа
7

8.

Значения по умолчанию
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] =
AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] =
'application/x-www-form-urlencoded';
axios({
method: 'post',
url: '/upload',
data: fileData,
onUploadProgress: (progressEvent) => {
console.log(`Uploaded: ${(progressEvent.loaded / progressEvent.total) * 100}%`);
},
});
8

9.

Запросы
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
9

10.

Запросы
Get
axios.get('/user?ID=12345')
.then(function (response) {
// обработка успешного запроса
console.log(response);
})
.catch(function (error) {
// обработка ошибки
console.log(error);
})
.finally(function () {
// выполняется всегда
});
export const getExecutions = async (order_number,
service_number) => {
const {data} = await $authHost.get('service_executions', {
params: {
order_number, service_number
}});
return data;
}
10

11.

Запросы
Post
Promise.all([getUserAccount(), getUserPermissions()])
.then(function (results) {
const acct = results[0];
const perm = results[1];
});
axios.post('/user', {
firstName: 'Urfin',
lastName: ‘Juice'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
11

12.

Update
Запросы
export const updateExecution = async (order_number, service_number,
service_status, service_execution_id,
master, assessment, execution_time, cost) => {
const {data} = await $authHost.put('service_executions/' + order_number +
'/' + service_number, {service_status, service_execution_id,
master, assessment, execution_time, cost});
return data;
}
Delete
export const deleteExecution = async
(service_execution_id) => {
const {data} = await
$authHost.delete('service_executions/' +
service_execution_id);
return data;
}
export const updateOrder = async (order) => {
const {data} = await $authHost.put('orders',
{params: {order_number: order.order_number}}, order);
return data;
}
12

13.

Возвращаемые значения
{
// `data`- это ответ, предоставленный сервером
data: {},
// `status`- это код состояния HTTP-запроса
status: 200,
// `statusText`- это сообщение о состоянии HTTP-запроса
statusText: 'OK',
// `headers` заголовки HTTP-запроса, на которые ответил сервер
// Все имена заголовков написаны в нижнем регистре, и к ним можно получить доступ, используя квадратные скобки.
// Например: `response.headers['content-type']`
headers: {},
// `config` - это конфигурация, которая была предоставлена ​`axios` для запроса
config: {},
// `request` - это запрос, который сгенерировал этот ответ
// Это последний экземпляр ClientRequest в node.js (в перенаправлениях)
// и экземпляр XMLHttpRequest в браузере.
request: {}
}
13

14.

Пример вызова запроса
getClientByID(params.id).then(data => client.setClient(data));
console.log(client._client.client_id)
import { registration } from "../http/userApi";
const sighIn = async (id, login, pass) => {
try {
const guest = await registration(id, login, pass);
user.setUser(guest);
user.setIsAuth(true);
id ? history(CLIENT_ROUTE) :
history(REGISTRATION_CLIENT_ROUTE);
} catch (error) {
const message = error.response.data.error;
setValidated(message);
}
}
14

15.

Задание
Написать http запросы к серверу через Axios:
1. Создать базу данных и подключить её к серверу.
2. Прописать подключение к серверу у клиентской части
(импортировать Axios и создать объект этого клиента).
3. Написать функции для каждого запроса по модели (ваш вариант) с
серверной части: get, post, put, delete.
4. Оформить на html-странице кнопки для вызова функций и поля для
ввода информации, если функция этого требует. Отобразить
возвращаемую сервером информацию в любом читаемом виде.
15

16.

На этом всё…