Настройка boot файлов для API

В Quasar framework boot файлы используются для инициализации и настройки сторонних библиотек, глобальных объектов, плагинов и API при запуске приложения. Каждый boot файл представляет собой модуль JavaScript или TypeScript, который выполняется до создания корневого Vue-компонента, что позволяет гарантировать доступность необходимых ресурсов во всех компонентах приложения.

Boot файлы размещаются в папке src/boot и подключаются через массив boot в конфигурации Quasar (quasar.config.js). Они могут экспортировать функции и объекты, которые затем становятся доступными через глобальный контекст приложения.

// Пример простого boot файла: src/boot/axios.js
import { boot } from 'quasar/wrappers'
import axios from 'axios'

export default boot(({ app, router, store }) => {
  // Создание глобального экземпляра axios
  const api = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 5000
  })

  // Добавление в глобальный контекст Vue
  app.config.globalProperties.$api = api
})

Подключение boot файлов

Boot файлы подключаются через массив boot в quasar.config.js:

boot: [
  'axios',
  'auth',
  'notifications'
]

Каждая строка соответствует имени файла в src/boot без расширения. Quasar автоматически обрабатывает эти файлы и гарантирует их последовательное выполнение в порядке перечисления.

Использование boot файлов для API

Boot файлы удобны для настройки:

  • HTTP-клиентов (axios, fetch, GraphQL clients)
  • Глобальных конфигураций API
  • Middleware для аутентификации
  • Интерсепторов запросов и ответов

Пример настройки API с токеном

// src/boot/api.js
import { boot } from 'quasar/wrappers'
import axios from 'axios'

export default boot(({ app, store }) => {
  const api = axios.create({
    baseURL: 'https://api.example.com',
  })

  // Интерсептор для добавления токена авторизации
  api.interceptors.request.use(config => {
    const token = store.state.auth.token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  })

  app.config.globalProperties.$api = api
})

Теперь любой компонент может использовать $api:

export default {
  async mounted() {
    const response = await this.$api.get('/users')
    console.log(response.data)
  }
}

Асинхронная инициализация

Boot файлы могут быть асинхронными, если необходимо выполнить подготовку API перед рендерингом приложения. Для этого достаточно вернуть промис из функции boot:

export default boot(async ({ app, store }) => {
  const token = await fetchTokenFromStorage()
  const api = axios.create({ baseURL: 'https://api.example.com' })
  
  api.interceptors.request.use(config => {
    if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  })
  
  app.config.globalProperties.$api = api
})

Порядок выполнения boot файлов

Quasar выполняет boot файлы строго в порядке их перечисления в конфигурации. Это критично, если один boot файл зависит от ресурсов другого:

boot: [
  'auth',      // создаёт store.state.auth.token
  'api'        // использует token для настройки axios
]

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

Использование boot файлов с Vue Plugins

Boot файлы идеально подходят для интеграции сторонних плагинов:

import { boot } from 'quasar/wrappers'
import VueToast from 'vue-toast-notification'
import 'vue-toast-notification/dist/theme-sugar.css'

export default boot(({ app }) => {
  app.use(VueToast)
})

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

Типичные ошибки и рекомендации

  • Не подключать тяжелые вычисления напрямую в boot, чтобы не замедлять старт приложения. Лучше выполнять их асинхронно.
  • Следить за порядком подключения, особенно при зависимости boot файлов друг от друга.
  • Не использовать window или document до монтирования, так как boot файлы могут выполняться на сервере (SSR) или в тестовой среде, где этих объектов нет.
  • Использовать app.config.globalProperties или provide/inject для передачи API по всему приложению, избегая глобальных переменных.

Заключение по API boot файлам

Boot файлы в Quasar — мощный инструмент для создания единой точки настройки API, управления токенами, интерсепторами и глобальными клиентами HTTP. Они обеспечивают строгий порядок инициализации и позволяют безопасно подключать сторонние библиотеки, гарантируя их доступность в любом компоненте Vue.

Это позволяет строить масштабируемую архитектуру приложения, где все API-интеграции централизованы и легко управляемы через единый механизм boot файлов.

Оглавление