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