strokoff 10 Января 2023 в 8:31

Обработка HTTP-запросов в больших Vue.js-приложениях

В этой статье я хочу рассказать как сохранить архитектуру приложения при использовании разных типов http-запросов и какие библиотеки можно использовать в приложении.

HTTP-запросы — важная часть любого крупномасштабного одностраничного приложения (SPA-single page application), потому что это — способ связи с серверами для обмена информацией, если только вы не имеете дело с оперативными данными (с данными обновляемыми в режиме реального времени), в этом случае вам могут понадобиться веб-сокеты вместо HTTP API.

Общие проблемы которые возникают, когда мы имеем дело с вызовами HTTP:

1. Нет общего интерфейса, в котором мы можем обрабатывать все http-вызовы
2. Отсутствует простой способ управления токеном аутентификации для каждого HTTP запроса
3. Передача общих заголовков для каждого вызова API
4. Обработка общих ошибок, для response status 5XX\4XX, в одной точке для каждого HTTP-вызова.
5. Обработка базового URL-адреса в случае разных сред
6. Обработка нескольких базовых URL-адресов в случае большого приложения, которое потребует обмена данными с несколькими серверами
7. Кроссбраузерная/Кроссплатформенная поддержка

В современной JavaScript разработке Fetch API очень популярен, но я не работаю с ним напрямую, потому что у него все еще есть проблемы с кроссбраузерной поддержкой (IE), а другие функции, такие как Interceptors, должны быть разработаны самим пользователем.

Для решения вышеперечисленных проблем я использую axios  т.к. в нем есть много функций «из коробки», например:

1. Кроссбраузерная/Кроссплатформенная поддержка. Вы можете использовать Axios для браузера, а также для среды nodejs.
2. Interceptor-ы запросов и ответов
3. Отмена запросов
4. Поддержка промисов (Promise API)
5. Несколько экземпляров клиента axios с различными пользовательскими конфигурациями

Поскольку HTTP-клиент будет использоваться во всем приложении, я собираюсь поместить его в app/shared/services, и код прототипа будет выглядеть следующим образом:

В приведенном выше фрагменте кода я добавил много вещей, которые кажутся сложными. Давайте упростим. Я объясню каждый шаг:

При использовании axios мы можем передавать некоторые общие параметры конфигурации, такие как базовый URL-адрес, заголовки, параметры и т. д., которые будут общими для всех запросов, выполняемых с этим экземпляром axios.

Я создаю экземпляр axios, передавая объект конфигурации. Итак, у вас возникнет вопрос, зачем создавать экземпляр, почему я не использую его напрямую? Большинство людей используют axios как singleton, просто импортируя и используя axios непосредственно там, где им нужно вызывать HTTP API. В этом подходе нет серьезных недостатков, если только вы не работаете с большим приложением и вам необходимо обеспечить гибкость, масштабируемость и простоту поддержки. Итак, подход, который я предлагаю, заключается в использовании экспортированного httpClient из этого файла вместо прямого axios, когда вам нужно вызвать HTTP Api. Основными преимуществами такого подхода будут:

• Все ваше приложение использует единый интерфейс http-client вместо axios, так что в будущем, если возникнет необходимость удалить/изменить axios, то это станет очень просто. Вам просто нужно интегрировать другую библиотеку в одном месте.
• Предположим, вашему приложению необходимо использовать HTTP API с двух разных серверов с разными аутентификациями, базовыми URL-адресами и т. д.
  Тогда становится очень просто создать и управлять отдельным экземпляром http-клиента для обоих серверов. Например. server1-http-client и server2-http-client и так далее. Мы можем управлять перехватчиками и конфигурациями в отдельных файлах, чтобы мы могли повторно использовать их в нескольких http-клиентах.

На следующем шаге мы добавляем некоторые распространенные перехватчики (interceptors) запросов и ответов, такие как authInterceptor, loggerInterceptor и т. д. Перехватчики предоставляют механизм для перехвата запроса или ответа. Это очень похожие концепции промежуточного программного обеспечения (midllewares) в фреймворках, где мы можем выполнять такие операции, как кэширование, ведение журнала запросов, логгирование, аутентификация и т. д.

Пример этой архитектуры Вы можете найти здесь

Заключение:

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

Ссылки по теме:

• Оригинал статьи на английском — Handle HTTP calls in a large scale Vue.js Application

Последняя редакция 14 января, 2023 в 11:01