Как обрабатывать вызовы 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.