Для того чтобы сделать запросы к REST API с использованием библиотеки Axios, необходимо сначала установить библиотеку, если она еще не установлена в вашем проекте. Вы можете сделать это с помощью npm или yarn:

• npm install axios
• yarn add axios

После установки вы можете использовать Axios в вашем JavaScript коде. Axios предлагает простой и удобный интерфейс для выполнения HTTP-запросов, таких как GET, POST, PUT, DELETE и другие.

Основные методы Axios

Вот некоторые из основных методов, которые вы можете использовать:

• axios.get(url[, config]) — для выполнения GET-запроса.
• axios.post(url[, data[, config]]) — для выполнения POST-запроса.
• axios.put(url[, data[, config]]) — для выполнения PUT-запроса.
• axios.delete(url[, config]) — для выполнения DELETE-запроса.

Теперь давайте посмотрим, как можно использовать эти методы в реальных примерах.

Пример выполнения GET-запроса

Предположим, что вы хотите получить список пользователей из API. Вы можете использовать следующий код:

import axios from 'axios';

const fetchUsers = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    console.log(response.data);
  } catch (error) {
    console.error('Ошибка при получении данных:', error);
  }
};

fetchUsers();

В этом примере мы используем async/await для обработки асинхронного кода. Если запрос успешен, мы выводим данные в консоль. Если произошла ошибка, мы обрабатываем ее в блоке catch.

Пример выполнения POST-запроса

Теперь давайте рассмотрим, как отправить данные на сервер с помощью POST-запроса. Например, мы хотим создать нового пользователя:

const createUser = async () => {
  try {
    const newUser = {
      name: 'Новый Пользователь',
      email: 'ne*****@ex*****.com'
    };

    const response = await axios.post('https://jsonplaceholder.typicode.com/users', newUser);
    console.log('Создан пользователь:', response.data);
  } catch (error) {
    console.error('Ошибка при создании пользователя:', error);
  }
};

createUser();

В этом примере мы создаем объект newUser и отправляем его на сервер. Если создание прошло успешно, мы выводим данные созданного пользователя.

Конфигурация запросов

Вы также можете передавать дополнительные параметры в конфигурации запросов. Например, вы можете указать заголовки, тайм-ауты и другие параметры:

const fetchWithConfig = async () => {
  try {
    const config = {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ваш_токен'
      },
      timeout: 5000 // Тайм-аут 5 секунд
    };

    const response = await axios.get('https://jsonplaceholder.typicode.com/users', config);
    console.log(response.data);
  } catch (error) {
    console.error('Ошибка при получении данных с конфигурацией:', error);
  }
};

fetchWithConfig();

Обработка ответов

Ответы от сервера могут содержать не только данные, но и информацию о статусе запроса. Axios возвращает объект, который содержит следующие свойства:

• data — данные, полученные от сервера.
• status — код статуса HTTP.
• statusText — текстовое представление статуса.
• headers — заголовки ответа.
• config — конфигурация запроса.

Например, вы можете получить код статуса, используя response.status:

const checkStatus = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    console.log('Код статуса:', response.status);
  } catch (error) {
    console.error('Ошибка при получении статуса:', error);
  }
};

checkStatus();

Обработка ошибок

Важно правильно обрабатывать ошибки, которые могут возникнуть при выполнении запросов. В Axios есть несколько способов обработки ошибок:

• catch — для обработки ошибок в async/await.
• then/catch — для обработки ошибок в промисах.
• Вы можете также использовать глобальный обработчик ошибок Axios с помощью axios.interceptors.

Вот пример глобального обработчика ошибок:

axios.interceptors.response.use(
  response => response,
  error => {
    console.error('Глобальная ошибка:', error);
    return Promise.reject(error);
  }
);

Это позволит вам обрабатывать ошибки централизованно, что может быть полезно для логирования или отображения уведомлений пользователям.

Заключение

Библиотека Axios делает работу с REST API простой и удобной. Вы можете легко выполнять запросы, обрабатывать ответы и управлять ошибками. Ознакомьтесь с документацией Axios для получения более подробной информации и примеров.