На основе чего написан axios

Axios: архитектурные основы и принципы работы

Axios — это популярный HTTP-клиент для JavaScript, написанный на чистом JavaScript/TypeScript и предназначенный для работы как в браузере, так и в среде Node.js. Его архитектура базируется на нескольких фундаментальных технологиях и принципах, которые обеспечивают его кроссплатформенность, гибкость и удобство использования.

1. Core: Нативный JavaScript/XMLHttpRequest и Fetch API (для браузера)

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

• XMLHttpRequest (XHR) — традиционный API для асинхронных HTTP-запросов в браузерах. Axios абстрагирует его сложность, предоставляя простой промис-ориентированный интерфейс.
• Fetch API — современная замена XHR. Начиная с версии 1.x, Axios может использовать Fetch, если это поддерживается средой и явно указано в конфигурации, хотя основным движком до сих пор чаще остается XHR для совместимости.

Пример использования низкоуровневого XHR, который инкапсулирует Axios:

// То, что делает Axios внутри (упрощённо):
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

2. Core: Модуль http / https (для Node.js)

В среде Node.js Axios не зависит от браузерных API. Вместо этого он использует встроенные модули:

• http и https — для выполнения HTTP-запросов.
• stream — для обработки потоковых данных (например, загрузка файлов).
• url — для парсинга и форматирования URL.

Пример конфигурации адаптера для Node.js:

// Axios определяет среду и выбирает соответствующий адаптер
if (typeof window === 'undefined') {
  // Используется Node.js адаптер на основе модуля 'http'
  const http = require('http');
  // ... логика создания запроса
}

3. Ключевые архитектурные принципы и зависимости

Axios построен с соблюдением современных принципов разработки:

• Промисы (Promises) — все запросы по умолчанию возвращают Promise, что позволяет использовать async/await и цепочки .then()/.catch().
• Перехватчики (Interceptors) — мощная система middleware для глобального перехвата и преобразования запросов и ответов.

  // Пример интерцептора
  axios.interceptors.request.use(config => {
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  });
  

• Отмена запросов (CancelToken, теперь сигналы AbortController) — поддержка отмены выполняющихся запросов с использованием стандартного AbortController.

  const controller = new AbortController();
  axios.get('/api', { signal: controller.signal });
  controller.abort(); // Отмена запроса
  

• Преобразование данных (Transform Data) — автоматическое преобразование JSON и других форматов данных.
• Защита от XSRF (XSRF Protection) — встроенная поддержка защиты от межсайтовой подделки запроса.

4. Зависимости (Dependencies)

Axios сознательно имеет минимальные зависимости для уменьшения размера пакета. Основные из них:

• follow-redirects — для обработки перенаправлений HTTP в Node.js (заменяет встроенный модуль, добавляя поддержку протоколов HTTP/HTTPS).
• form-data — для работы с multipart/form-data (загрузка файлов) в Node.js.

5. TypeScript и модульная структура

Исходный код Axios написан на TypeScript, что обеспечивает:

• Статическую типизацию и надежность.
• Автоматическую генерацию качественных файлов определения типов (.d.ts).
• Четкую структуру кода с разделением на модули (адаптеры, интерцепторы, утилиты, ядро).

Вывод

Axios не является надстройкой над другой крупной библиотекой (как, например, jQuery.ajax). Это самостоятельная реализация, которая:

1. Абстрагирует нативные API браузера (XHR/Fetch) и Node.js (http/https).
2. Предоставляет единый, согласованный промис-ориентированный API для обеих сред.
3. Расширяет базовые возможности системами интерцепторов, отмены запросов, трансформации данных и защитой.
4. Следует современным стандартам JavaScript/TypeScript, сохраняя обратную совместимость.

Эта архитектура делает Axios универсальным, легковесным и предсказуемым инструментом, что объясняет его широкое adoption в экосистеме JavaScript.