Как обрабатывать вызовы 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 };
Обработка ошибок и исключений в приложении Vue.js

При использовании 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.