Как обрабатывать вызовы HTTP в крупномасштабном приложении на Vue.js

В предыдущей статье я рассказал, как организовать структуру приложение на Vue. В данной части серии мы научимся создавать архитектуру приложения, используя разные типы вызовов http.

HTTP-вызовы

HTTP-вызовы – это метод связи приложения с серверами для обмена информацией. Если только вы не работаете с быстро обновляемыми данными. В этом случае вам потребуются веб-сокеты.

Эффективная обработка HTTP-вызовов в приложении требует:

  • Наличие общего интерфейса.
  • Простого метода управления токеном аутентификации для каждого HTTP API.
  • Передача общих заголовков в ответ на каждый вызов API;
  • Централизованной обработки ошибок для каждого http-вызова.
  • Функции обработки базового URL в разных средах.
  • Обработка нескольких базовых URL для обмена данными с несколькими серверами.
  • Кроссбраузерность.

Популярным решением для работы с HTTP-вызовами будет JavaScript Fetch API. Но у него есть проблемы с кроссбраузерностью.

Axios

JavaScript-библиотека Axios лишена данных проблем. А также содержит богатый функционал:

  • Кроссбраузерность/поддержка разных платформ. Вы можете использовать Axios, как для браузера, так и для среды node.js.
  • Перехват запросов и ответов.
  • Отмена запросов.
  • Поддержка Promise API.
  • Пару экземпляров покупателя Axios с разными пользовательскими конфигурациями.

В прошлой статье я обсуждал структуру папок. Но сейчас возникает вопрос: где расположить каталоги, связанные с Axios? Поскольку HTTP-клиент будет использоваться во всем приложении, я помещу его в app/shared/services. Код прототипа выглядит следующим образом:

import axios from 'axios';/** Конфигурация по умолчанию для axios */let config = { baseURL: 'http://localhost:3000/'};/** Создание экземпляра axios */const httpClient = axios.create(config);/** Перехватчики токена авторизации */const authInterceptor = config => { /** TODO: Добавить токен авторизации */ return config;};/** Перехватчики журнала */const loggerInterceptor = config => { /** TODO */ return config;}/** Добавление перехватчиков запроса */httpClient.interceptors.request.use(authInterceptor);httpClient.interceptors.request.use(loggerInterceptor);/** Добавление перехватчиков ответа */httpClient.interceptors.response.use( response => { /** TODO: Добавить перехватчики ответа */ return response; }, error => { /** TODO: Обработать ошибку в ответе */ return Promise.reject(error); });export { httpClient };

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

Но почему не использовать Axios прямо непосредственно там, где необходимо вызвать HTTP API? Этот подход имеет в себя существенные недостатки, если вы работаете с крупномасштабным приложением. Так что я предлагаю использовать объект httpClient, экспортируемый из http-client.js. Основные преимущества этого подхода:

  • Все приложение использует интерфейс http-client вместо Axios. Так что в будущем можно будет запросто удалить/настроить Axios.
  • Без труда создавать и управлять отдельным экземпляром http-клиента для нескольких серверов. К примеру, server1-http-client и server2-http-client и так далее. Можно легко управлять перехватчиками и конфигурациями в отдельных файлах, чтобы использовать в нескольких http- покупателях.

После создания экземпляра Axios мы добавляем некоторые общие перехватчики запросов и ответов: authInterceptor, loggerInterceptor и т. д.

Я подготовил шаблон данной архитектуры. Вы можете найти его здесь.

Заключение

Рассмотренный выше подход помогает справляться с проблемами в крупномасштабных приложениях Vue.js.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *