Interceptors для запросов и ответов

В библиотеке Quasar для работы с HTTP-запросами используется модуль axios, который интегрирован через @quasar/quasar-app-extension-axios. Одной из мощных возможностей является использование interceptors — функций, перехватывающих запросы или ответы перед их обработкой. Это позволяет централизованно добавлять заголовки, логировать данные, обрабатывать ошибки или изменять параметры запросов и ответов.

Подключение Axios в Quasar

Для начала необходимо убедиться, что axios подключён через Quasar конфигурацию. В quasar.conf.js добавляется настройка:

// quasar.conf.js
module.exports = function (/* ctx */) {
  return {
    framework: {
      plugins: ['Notify'] // примеры других плагинов
    },
    boot: [
      'axios'
    ]
  }
}

В папке boot/axios.js создается базовая конфигурация:

import { boot } from 'quasar/wrappers'
import axios from 'axios'

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
})

export default boot(({ app }) => {
  app.config.globalProperties.$axios = axios
  app.config.globalProperties.$api = api
})

export { api }

После этого api доступен глобально в компонентах Vue через this.$api.

Interceptors для запросов

Interceptor для запросов позволяет модифицировать конфигурацию запроса перед отправкой на сервер. Это полезно для добавления токенов авторизации, логирования или изменения URL.

api.interceptors.request.use(
  config => {
    // Добавление токена авторизации
    const token = localStorage.getItem('authToken')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }

    // Логирование запроса
    console.log('Запрос:', config.method.toUpperCase(), config.url)

    return config
  },
  error => {
    // Обработка ошибок конфигурации запроса
    console.error('Ошибка запроса:', error)
    return Promise.reject(error)
  }
)

Ключевые моменты:

  • config — объект запроса axios, содержащий url, method, headers, data и другие параметры.
  • Можно возвращать изменённый config или отклонять промис с ошибкой.
  • Все запросы через api автоматически проходят через этот interceptor.

Interceptors для ответов

Interceptor для ответов позволяет централизованно обрабатывать полученные данные или ошибки. Часто используется для глобальной обработки статусов 401, 403 или логирования ответов.

api.interceptors.response.use(
  response => {
    // Прямой доступ к данным ответа
    console.log('Ответ сервера:', response.status, response.data)
    
    // Можно возвращать только данные, чтобы компоненты их получали напрямую
    return response.data
  },
  error => {
    // Глобальная обработка ошибок
    if (error.response) {
      switch (error.response.status) {
        case 401:
          console.warn('Неавторизованный доступ. Редирект на страницу входа.')
          break
        case 500:
          console.error('Ошибка сервера:', error.response.data)
          break
      }
    } else {
      console.error('Сетевой или неизвестный сбой:', error.message)
    }

    return Promise.reject(error)
  }
)

Ключевые моменты:

  • response содержит data, status, headers, config.
  • Обработку ошибок можно централизовать, например, показывать уведомления через Quasar Notify.
  • Возврат response.data упрощает работу в компонентах — не нужно каждый раз писать .data.

Перехват нескольких axios-инстансов

Если в проекте используется несколько API-инстансов, для каждого можно создавать отдельные interceptors:

const userApi = axios.create({ baseURL: '/user' })
const productApi = axios.create({ baseURL: '/product' })

userApi.interceptors.request.use(config => {
  console.log('User API запрос', config.url)
  return config
})

productApi.interceptors.response.use(response => {
  console.log('Product API ответ', response.data)
  return response.data
})

Такой подход позволяет разделять логику авторизации, обработки ошибок и логирования по отдельным сервисам.

Практические рекомендации

  1. Использовать один interceptor для всего проекта, если логика одинаковая (например, авторизация).
  2. Фильтровать ошибки по коду, чтобы не дублировать обработку в компонентах.
  3. Возвращать только нужные данные (response.data) для удобства.
  4. Логировать запросы и ответы на этапе разработки для быстрого дебага.
  5. Удалять interceptors, если нужно временно отключить глобальную обработку:
const requestInterceptor = api.interceptors.request.use(config => config)
api.interceptors.request.eject(requestInterceptor)

Интеграция с Quasar Notify

Для отображения ошибок можно использовать Notify:

import { Notify } from 'quasar'

api.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      Notify.create({ message: 'Необходимо войти в систему', color: 'negative' })
    } else if (error.response?.status >= 500) {
      Notify.create({ message: 'Серверная ошибка', color: 'negative' })
    }
    return Promise.reject(error)
  }
)

Такой подход позволяет централизованно управлять уведомлениями и упрощает компоненты Vue, которые теперь не заботятся о глобальной обработке ошибок.

Использование interceptors в Quasar через axios обеспечивает мощный инструмент для управления HTTP-запросами и ответами, делая код более чистым, поддерживаемым и безопасным.

Оглавление