Интеграция Axios и его преимущества для работы с API — настройка и типизация

Почему стоит использовать Axios вместо fetch

fetch предоставляет базовый функционал для работы с HTTP-запросами, но при сложных сценариях может потребоваться дополнительный код для обработки некоторых задач. Вот несколько причин, почему многие разработчики выбирают Axios:

1. Обработка JSON по умолчанию
   В Axios данные ответа автоматически обрабатываются и преобразуются в JSON (в отличие от fetch, где нужно вызывать response.json() вручную).

2. Широкий функционал
   Axios поддерживает отмену запросов, таймауты, обработку данных до отправки, возможность настройки базового URL и многое другое.

3. Интерсепторы
   Позволяют централизованно обрабатывать запросы и ответы, например, добавлять токены авторизации или логировать ошибки.

4. Единый обработчик ошибок
   В fetch вам нужно вручную проверять статус ответа. Axios автоматически вызовет catch для всех ответов с ошибочными статусами.

5. Широкая поддержка старых браузеров
   Хотя это менее актуально для мобильных приложений, Axios поддерживает даже более старые версии среды.

Установка и базовая настройка Axios

Сначала установим Axios в наш проект:

npm install axios

Теперь создадим простую конфигурацию Axios для работы с нашим API. Предположим, что наш API доступен по адресу https://api.example.com.

// src/api/axiosConfig.ts

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://api.example.com", // Базовый URL для запросов
  timeout: 10000, // Тайм-аут для запросов (в миллисекундах)
  headers: {
    "Content-Type": "application/json", // Заголовок для отправки JSON
  },
});

export default axiosInstance;

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

Типизация запросов и ответов с Axios

TypeScript и Axios — идеальная пара, которая помогает избежать многих ошибок при работе с данными. Посмотрим, как типизировать запросы и ответы.

1. Определение интерфейса данных

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

[
  {
    "id": 1,
    "name": "John Doe",
    "email": "john.doe@example.com"
  },
  {
    "id": 2,
    "name": "Jane Doe",
    "email": "jane.doe@example.com"
  }
]

Для типизации создадим интерфейс:

// src/types/User.ts

export interface User {
  id: number;
  name: string;
  email: string;
}

2. Типизация GET-запроса

Теперь напишем функцию для получения списка пользователей:

// src/api/userApi.ts

import axiosInstance from "./axiosConfig";
import { User } from "../types/User";

export const fetchUsers = async (): Promise<User[]> => {
  const response = await axiosInstance.get<User[]>("/users");
  return response.data; // response.data типизирован!
};

3. Типизация POST-запроса

Если нам нужно создать нового пользователя, типизация также будет полезна:

// src/api/userApi.ts

export interface CreateUserRequest {
  name: string;
  email: string;
}

export const createUser = async (user: CreateUserRequest): Promise<User> => {
  const response = await axiosInstance.post<User>("/users", user);
  return response.data;
};

Вишенка на торте

Axios поддерживает generics, что позволяет типизировать как запросы, так и ответы. Обратите внимание на <User[]> в примере выше — это помогает нам быть уверенными в типах данных, которые мы отправляем и получаем.

Создание и использование интерсепторов

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

Добавим токен авторизации в заголовки всех запросов:

// src/api/axiosConfig.ts

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 10000,
  headers: {
    "Content-Type": "application/json",
  },
});

// Интерсептор для запросов
axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token"); // Получение токена из localStorage
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // Добавление токена в заголовок
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Интерсептор для ответов
axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    // Логирование ошибок
    console.error("Ошибка API:", error.response?.data || error.message);
    return Promise.reject(error);
  }
);

export default axiosInstance;

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

Преимущества централизованной настройки Axios

1. Упрощение кода
   Вместо дублирования настроек (например, базового URL или заголовков) можно вынести их в одно место.

2. Повышенная безопасность
   Используя интерсепторы, вы исключаете вариант, что случайно забудете добавить токен или обработать ошибку.

3. Масштабируемость
   Если нужно изменить настройки (например, базовый URL), это делается в одном месте, а не во всех функциях.

2

Задача

Модуль 3: React, 24 уровень, 3 лекция

Недоступна

Типизация Axios-запросов и ответов

Типизация Axios-запросов и ответов

Открыть