Mocking API запросов

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

Основные подходы к мокированию

  1. Использование Axios interceptors

Quasar по умолчанию не навязывает конкретную библиотеку для HTTP-запросов, но чаще всего применяется axios. С помощью интерсепторов можно перехватывать запросы и возвращать заранее определённые данные:

import axios from 'axios';

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

api.interceptors.request.use(config => {
  if (config.url === '/users' && config.method === 'get') {
    return Promise.resolve({
      data: [
        { id: 1, name: 'Иван' },
        { id: 2, name: 'Мария' }
      ]
    });
  }
  return config;
});

Ключевой момент: этот подход позволяет изолированно мокировать отдельные эндпоинты без изменения логики приложения.

  1. Использование пакета msw (Mock Service Worker)

msw работает на уровне Service Worker, что делает мокирование полностью прозрачным для приложения и позволяет эмулировать полноценное поведение REST или GraphQL API. Настройка в Quasar осуществляется следующим образом:

// src/mocks/handlers.js
import { rest } from 'msw';

export const handlers = [
  rest.get('/api/products', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([
        { id: 1, title: 'Ноутбук', price: 50000 },
        { id: 2, title: 'Смартфон', price: 30000 }
      ])
    );
  })
];

// src/mocks/browser.js
import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

// main.js
import { worker } from './mocks/browser';

if (process.env.MODE === 'development') {
  worker.start();
}

Преимущества MSW:

  • Поддержка всех типов HTTP-запросов (GET, POST, PUT, DELETE).
  • Полная имитация задержки сети и статусов ошибок.
  • Возможность централизованного управления моками для разных окружений.

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

При создании проекта Quasar важно правильно организовать структуру моков. Оптимальная практика:

src/
 ├─ api/
 │   ├─ axios.js
 │   └─ index.js
 ├─ mocks/
 │   ├─ handlers.js
 │   └─ browser.js
 └─ boot/
     └─ mock-api.js

Файл boot/mock-api.js регистрирует сервис моков перед запуском приложения:

import { boot } from 'quasar/wrappers';
import { worker } from 'src/mocks/browser';

export default boot(async () => {
  if (process.env.MODE === 'development') {
    await worker.start();
  }
});

Это гарантирует, что моки будут активны только в development режиме и не повлияют на production сборку.

Настройка задержки и ошибок

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

rest.get('/api/orders', (req, res, ctx) => {
  const simulateError = req.url.searchParams.get('error');
  
  if (simulateError === 'true') {
    return res(
      ctx.status(500),
      ctx.json({ message: 'Internal Server Error' }),
      ctx.delay(800)  // задержка в миллисекундах
    );
  }

  return res(
    ctx.status(200),
    ctx.json([{ id: 1, total: 1200 }]),
    ctx.delay(500)
  );
});

Комбинирование с Vuex и Composition API

Моки легко интегрируются в состояние приложения. Пример использования с Composition API:

import { ref, onMounted } from 'vue';
import axios from 'src/api/axios';

export function useUsers() {
  const users = ref([]);
  const loading = ref(false);
  const error = ref(null);

  const fetchUsers = async () => {
    loading.value = true;
    try {
      const response = await axios.get('/users');
      users.value = response.data;
    } catch (e) {
      error.value = e;
    } finally {
      loading.value = false;
    }
  };

  onMounted(fetchUsers);

  return { users, loading, error, fetchUsers };
}

Даже с моками логика работы с API остаётся идентичной реальной интеграции, что делает тестирование и разработку максимально близкой к production.

Динамические моки и параметры

Quasar и MSW позволяют создавать динамические ответы на основе параметров запроса:

rest.get('/api/products/:id', (req, res, ctx) => {
  const { id } = req.params;
  return res(
    ctx.status(200),
    ctx.json({ id, title: `Продукт ${id}`, price: 1000 * id })
  );
});

Ключевой момент: использование параметров URL и query-параметров позволяет полностью эмулировать поведение backend API.

Организация моков для больших проектов

  • Разделение по модулям (users, products, orders) помогает поддерживать читаемость.
  • Использование factories для генерации случайных данных ускоряет разработку.
  • Централизованное управление статусами ответов и задержкой делает тестирование интерфейсов предсказуемым.

Эти подходы обеспечивают масштабируемость моков и позволяют легко адаптировать проект под разные стадии разработки и тестирования.

Оглавление