Перейти к содержанию

API Layer — Архитектура HTTP-слоя

Уровень: L2 (details) | ← Назад

Обзор

API-слой обеспечивает единый интерфейс взаимодействия с REST API бэкенда. Построен на базе Axios с централизованной обработкой авторизации, автоматическим обновлением токенов и типизированными модулями по доменам.

Архитектура

graph TB
    subgraph "API Layer"
        Client[apiClient<br/>axios instance]
        ReqInt[Request Interceptor<br/>Bearer token injection]
        ResInt[Response Interceptor<br/>401 handling + refresh]

        Client --> ReqInt
        Client --> ResInt
    end

    subgraph "API Modules"
        Auth[authApi<br/>login, register, refresh]
        Items[itemsApi<br/>CRUD вещей]
        Outfits[outfitsApi<br/>CRUD образов]
        Feed[feedApi<br/>лента]
        Media[mediaApi<br/>загрузка медиа]
        Share[shareApi<br/>шеринг]
        Ref[referenceApi<br/>справочники]
    end

    Auth --> Client
    Items --> Client
    Outfits --> Client
    Feed --> Client
    Media --> Client
    Share --> Client
    Ref --> Client

    Client --> Backend[Backend API]

Диаграмма

Sequence Diagram: Auto-Refresh Token

sequenceDiagram
    participant UI as React Component
    participant API as apiClient
    participant ReqI as Request Interceptor
    participant ResI as Response Interceptor
    participant Auth as Auth Store
    participant Server as Backend

    UI->>API: GET /items
    API->>ReqI: Добавить Bearer token
    ReqI->>Server: GET /items + Authorization
    Server-->>ResI: 401 Unauthorized

    Note over ResI: Первый 401 → начать refresh
    ResI->>Auth: getState().refreshToken
    ResI->>Server: POST /auth/refresh {refresh_token}

    Note over ResI: Параллельные запросы ставятся в failedQueue
    UI->>API: GET /outfits (параллельно)
    API->>ResI: 401 → добавить в очередь

    Server-->>ResI: 200 {access_token, refresh_token}
    ResI->>Auth: setTokens(new_access, new_refresh)
    ResI->>API: Повторить /items с новым токеном
    ResI->>API: Повторить /outfits из очереди
    API-->>UI: Данные items
    API-->>UI: Данные outfits

Диаграмма

Модули API

Модуль Файл Эндпоинты Описание
authApi auth.ts 6 Авторизация, регистрация, профиль
itemsApi items.ts 5 CRUD вещей гардероба
outfitsApi outfits.ts 10 CRUD образов, сохранение, шеринг
feedApi feed.ts 1 Лента образов с фильтрами
mediaApi media.ts 2 Загрузка медиа с компрессией
shareApi share.ts 4 Публичные ссылки, claim
referenceApi reference.ts 5 Справочники (цвета, категории, слоты)

Итого: 33 эндпоинта через единый типизированный клиент.

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

  1. 401 Unauthorized → автоматический refresh + retry (очередь для параллельных запросов)
  2. Refresh failed → logout пользователя, очистка токенов
  3. Network error → пробрасывается в вызывающий код (offline-слой перехватывает)
  4. Компрессия медиа — встроена в mediaApi.upload() до отправки на сервер

Ключевые паттерны

  • Singleton instance — один apiClient на всё приложение
  • Token injection — через request interceptor из Zustand store
  • Queue-based refresh — failedQueue предотвращает race condition при параллельных 401
  • Domain modules — каждый модуль экспортирует объект с типизированными методами
  • Response unwrap — .then(r => r.data) в каждом методе для удобства вызова

Навигация