Интеграция Axios в Quasar

Для работы с HTTP-запросами в приложениях на Quasar обычно используют библиотеку Axios. Она обеспечивает удобный интерфейс для выполнения запросов к REST API и обработки ответов.

Установка производится стандартно через npm или yarn:

npm install axios
# или
yarn add axios

После установки Axios необходимо интегрировать его в проект Quasar. Наиболее удобный способ — создать плагин, который позволит использовать Axios во всех компонентах через $axios.

Создание плагина Axios

В Quasar плагины создаются в папке src/plugins. Создадим файл axios.js:

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

const api = axios.create({
  baseURL: 'https://api.example.com', // базовый URL для всех запросов
  timeout: 10000,                     // таймаут в миллисекундах
  headers: {
    'Content-Type': 'application/json'
  }
})

export default boot(({ app }) => {
  app.config.globalProperties.$axios = axios        // доступ к оригинальному axios
  app.config.globalProperties.$api = api           // доступ к настроенному экземпляру
})

export { api }

Далее нужно зарегистрировать плагин в файле quasar.conf.js:

boot: [
  'axios'
]

Теперь $axios и $api доступны во всех компонентах и сторе Vuex.

Использование Axios в компонентах

Пример GET-запроса с использованием настроенного экземпляра:

export default {
  name: 'UserList',
  data() {
    return {
      users: [],
      loading: false,
      error: null
    }
  },
  async mounted() {
    this.loading = true
    try {
      const response = await this.$api.get('/users')
      this.users = response.data
    } catch (err) {
      this.error = err.response?.data?.message || err.message
    } finally {
      this.loading = false
    }
  }
}

POST-запрос с передачей данных:

async addUser(user) {
  try {
    const response = await this.$api.post('/users', user)
    this.users.push(response.data)
  } catch (err) {
    console.error('Ошибка при добавлении пользователя:', err)
  }
}

Интерцепторы Axios

Для централизованной обработки запросов и ответов используются интерцепторы. Они позволяют, например, автоматически добавлять токен авторизации или обрабатывать ошибки.

api.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => Promise.reject(error))

api.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response?.status === 401) {
    // логика выхода или обновления токена
    console.warn('Неавторизованный доступ')
  }
  return Promise.reject(error)
})

Использование с Vuex

Для работы с состоянием часто создают отдельный модуль Vuex, в котором выполняются запросы через $api.

Пример модуля store/modules/users.js:

export default {
  namespaced: true,
  state: () => ({
    users: [],
    loading: false,
    error: null
  }),
  mutations: {
    setUsers(state, users) { state.users = users },
    setLoading(state, loading) { state.loading = loading },
    setError(state, error) { state.error = error }
  },
  actions: {
    async fetchUsers({ commit }) {
      commit('setLoading', true)
      try {
        const { data } = await this._vm.$api.get('/users')
        commit('setUsers', data)
      } catch (err) {
        commit('setError', err.response?.data?.message || err.message)
      } finally {
        commit('setLoading', false)
      }
    }
  }
}

Работа с динамическими параметрами и заголовками

Axios позволяет легко передавать параметры и настраивать заголовки для отдельных запросов:

const response = await this.$api.get('/search', {
  params: { query: 'quasar', lim it: 10 },
  headers: { 'X-Custom-Header': 'CustomValue' }
})

Для POST/PUT-запросов:

await this.$api.post('/users', {
  name: 'John Doe',
  email: 'john@example.com'
}, {
  headers: { 'X-Request-ID': '12345' }
})

Обработка ошибок

Axios предоставляет объект error, содержащий полезные данные:

  • error.response — ответ сервера (код, данные)
  • error.request — объект запроса, если ответа нет
  • error.message — сообщение ошибки

Пример обработки в компоненте:

try {
  await this.$api.get('/data')
} catch (error) {
  if (error.response) {
    console.error('Ошибка сервера:', error.response.status)
  } else if (error.request) {
    console.error('Нет ответа от сервера')
  } else {
    console.error('Ошибка запроса:', error.message)
  }
}

Заключение по возможностям интеграции

Интеграция Axios через плагин Quasar обеспечивает:

  • Централизованное управление конфигурацией HTTP-клиента.
  • Простоту использования во всех компонентах и Vuex.
  • Возможность добавления интерцепторов для авторизации и обработки ошибок.
  • Гибкость в работе с параметрами и заголовками отдельных запросов.

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

Оглавление