В этом видео проводится подробный разбор работы с сетевыми технологиями в разработке фронтенда на TypeScript: библиотекой Axios для REST-запросов и протоколом WebSocket для постоянного двунаправленного соединения. Рассматриваются вопросы создания API-инстансов с помощью Axios, настройка интерцепторов для запросов и ответов, типизация данных с использованием OpenAPI-кодегенерации, обработка авторизации через токены и куки, а также реализация авторизации и взаимодействия с сервером через веб-сокеты. Особое внимание уделяется улучшению developer experience за счёт автоматической типизации запросов и ответов, унификации работы с API и созданию устойчивого подключения WebSocket с механизмами отправки и приёма сообщений. Видео будет полезно frontend-разработчикам среднего уровня, желающим углубить знания работы с API в TypeScript, освоить автоматическую типизацию, методы авторизации и практические архитектурные подходы для управления WebSocket-соединениями.
Хронологическая сводка
- 00:00-06:00 — Введение в Axios и работа с REST API
Рассматривается базовый функционал Axios, его преимущества в сравнении с fetch, создание инстансов с настройкой baseURL, работа с интерцепторами для обработки запросов и ответов, управление авторизацией через HTTP заголовки. Закладываются основы для оптимизации кода и улучшения developer experience при работе с сетью.
- 06:00-13:00 — Типизация и автоматизация на основе кодогенерации OpenAPI
Показана генерация типизированных API-инстансов с помощью OpenAPI кодегенераторов, интеграция с TypeScript, выгоды автоматической типизации данных запросов/ответов, сокращение рутинного кода. Начинается подготовка инфраструктуры для удобной работы с backend API.
- 13:00-27:00 — Практическая реализация авторизации с куками и localStorage
Демонстрируется построение формы логина, сохранение JWT токена в localStorage, валидация ввода пользователя, проверка наличия токена при переходах по страницам, перенаправление на страницу логина при отсутствии токена. Обсуждаются подводные камни работы с куки и localStorage.
- 27:00-44:00 — Детальная настройка авторизации в Axios, обработка ошибок и отладка
Изложены нюансы добавления токена в заголовки запросов через интерцепторы, пояснена роль протокола Bearer, обсуждается важность правильного возвращения конфигурационных объектов, решаются ошибки с типизацией и отладка запросов.
- 44:00-50:00 — Обзор WebSocket и его отличия от REST
Объясняется концепция постоянного двустороннего соединения WebSocket, отличие от stateless REST запросов, преимущества для реализации real-time уведомлений и сообщений, базовый синтаксис подключения к WebSocket серверу.
- 50:00-01:07:00 — Практическая реализация WebSocket соединения
Проводится создание WebSocket-соединения в приложении с использованием provide/inject для единого подключения на всех страницах, отправка и приём сообщений в формате JSON, разбор структуры сообщений на клиент-сервер и сервер-клиент. Рассмотрены сложности с установкой соединения и нюансы с токенами.
- 01:07:00-01:13:20 — Отладка и обсуждение ошибок WebSocket, планы по улучшению
Проводится тестирование отправки и приёма сообщений, обсуждаются ошибки в параметрах (например, обязательность chat ID), планы по доработке и рефакторингу кода. Спикер отмечает необходимость переписывать legacy-код, упрощать архитектуру и повышать стабильность.
- 01:13:20-01:17:00 — Заключение: рекомендации и планы на дальнейшие занятия
Подытоживается сложность текущего проекта, важность работы с OpenAPI, авторизации и веб-сокетами, анонсируется следующая тема — управление состоянием с помощью Pinia. Дается мотивация продолжать рефакторинг кода и развитие проекта с акцентом на лучшие практики.
Ключевые моменты
- ⚡ Axios автоматизирует работу с сетью — типизированные запросы и ответы, удобные методы get/post/delete, встроенная обработка ошибок через catch, упрощённое извлечение данных (res.data без JSON.parse).
- 🔧 Интерцепторы для перехвата запросов и ответов — позволяют добавить авторизацию, логировать ошибки, обрабатывать совпадения с backend ответами централизованно.
- 🤖 OpenAPI кодогенерация генерация типизированных API клиентов — значительно упрощает разработку, гарантирует типовую безопасность данных, минимизирует ручное создание типов и интерфейсов.
- 🔐 Авторизация с JWT токенами в localStorage и через заголовки Authorization Bearer — удобный обмен с backend, защита запросов, возможность перехвата и автоматической вставки токена в запросы через интерцепторы.
- 🌐 WebSocket обеспечивает двустороннюю связь в режиме реального времени — в отличие от REST, сервер может отправлять данные клиенту без предварительного запроса, что идеально для чатов и уведомлений.
- 🔄 Использование provide/inject для единого WebSocket подключения в SPA — предотвращает множественные подключения, упрощает архитектуру и повторное использование соединения между страницами.
- 🛠️ Обработка форм, валидация и работа с событиями WebSocket — отправка сообщений в формате JSON, обработка входящих событий, архитектурные решения для дальнейшей масштабируемости.
- ⚠️ Реальные сложности разработки: баги, проблемы с типизацией и конфигурацией, устаревший код (legacy) — важность рефакторинга и перехода на современные инструменты и практики.
Часто задаваемые вопросы (FAQ)
1. Зачем использовать Axios, если есть fetch?
Axios обеспечивает удобную типизацию, упрощённую работу с ответами (res.data), поддержку интерцепторов и лучшую интеграцию с TypeScript, что повышает производительность и читаемость кода.
2. Как правильно настроить авторизацию в запросах Axios?
Через интерцепторы request можно автоматически добавлять заголовок Authorization с JWT токеном, который хранится в localStorage или куках. Это снижает дублирование кода и защищает API.
3. Что такое кодогенерация OpenAPI и как это помогает?
OpenAPI кодеген автоматически формирует клиентские API-инстансы с точной типизацией на основе backend спецификации, что экономит время и уменьшает ошибки в типах.
4. В чём преимущества WebSocket перед REST для чата?
WebSocket поддерживает постоянное соединение, позволяя серверу самостоятельно отправлять уведомления и сообщения без необходимости клиента постоянно опрашивать сервер.
5. Как использовать provide/inject для WebSocket в приложении?
Создается единый объект WebSocket в корне приложения (provide), который затем можно получить и использовать на любых страницах или компонентах через inject, обеспечивая единое подключение и управление состоянием.
Заключение
Видео демонстрирует комплексный подход к работе с сетью в frontend-приложениях на TypeScript с использованием Axios и WebSocket. Основная рекомендация — применять современные инструменты автоматизации типизации (OpenAPI кодеген), использовать интерцепторы для удобства и безопасности запросов и создавать эффективную архитектуру с единственным WebSocket соединением для realtime-коммуникаций. Кроме технических основ видео подчеркивает важность регулярного рефакторинга legacy-кода для поддержания качества проекта. Следующий логичный шаг — освоение управления состоянием через Pinia. Для практической пользы рекомендуется подробно изучить документацию backend API и экспериментировать с запросами через Swagger UI. Рекомендации к действию: обновить API-интерфейсы с помощью кодогенерации, организовать централизованную авторизацию на основе JWT, внедрить единый WebSocket сервис с корректным жизненным циклом и продолжить улучшать компонентную архитектуру фронтенда.
Материалы
REST - https://chat.salut.uno/docs