Библиотека Axios JavaScript

Axios — это популярная JavaScript-библиотека для выполнения HTTP-запросов, которая работает как в браузере, так и на сервере с использованием Node.js. Она предоставляет удобный API для взаимодействия с RESTful или GraphQL API, позволяя разработчикам легко отправлять запросы и обрабатывать ответ

Основные особенности Axios

Promise-Based API:

• Axios использует Promises для обработки асинхронных операций, что делает код более чистым и читаемым

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Поддержка HTTP-методов:

• Axios позволяет выполнять запросы с использованием методов GET, POST, PUT, PATCH, DELETE и других.

Интерцепторы (Interceptors):

• Возможность перехватывать запросы и ответы для модификации или добавления логики (например, добавление токенов авторизаци

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

Трансформация данных:

• Axios позволяет изменять данные запроса или ответа перед их обработкой

axios.post('/api/user', { name: 'John' }, {
  transformRequest: [data => JSON.stringify(data)]
});

Автоматическая сериализация данных:

• Поддержка автоматической сериализации данных в JSON, FormData или URL-encoded форматы

Отмена запросов:

• Возможность отмены запросов с использованием токенов отмены (CancelToken)

Поддержка тайм-аутов:

• Установка времени ожидания для запросов

axios.get('/api/data', { timeout: 5000 });

Работа с прогрессом загрузки:

• Отслеживание прогресса загрузки данных в браузере.

Установка Axios

Axios можно установить через любой пакетный менеджер:

npm

npm install axios

yarn

yarn add axios

CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Пример использования

GET-запрос

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

POST-запрос

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'New Post',
    body: 'This is a new post.',
    userId: 1
  })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Создание кастомного экземпляра Axios

Вы можете настроить экземпляр Axios с собственными настройками по умолчанию:

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
});

apiClient.get('/endpoint')
  .then(response => console.log(response.data));

Преимущества Axios

1. Простота использования и интуитивно понятный синтаксис.
2. Поддержка работы как в браузере, так и на сервере.
3. Возможность настройки глобальных параметров для всех запросов.
4. Улучшенная обработка ошибок в сравнении с fetch.
5. Широкая поддержка дополнительных функций, таких как интерцепторы и отмена запросов.

Постарался рассказать про библиотеку Axios подробно и на простых примерах. Напишите в комментариях, если остаются вопросы