157 lines
5.6 KiB
Markdown
157 lines
5.6 KiB
Markdown
# Рефакторинг API запросов - Инструкция по тестированию
|
||
|
||
## ✅ Что было сделано
|
||
|
||
### Проблема
|
||
При переходе на главную страницу выполнялось **10+ дублирующихся API запросов**:
|
||
- `/api/v1/departments/my-departments/` - **3 раза** (!!!)
|
||
- `/api/v1/calendar/events/?start=...&end=...` - **2-3 раза** для каждого периода
|
||
|
||
### Решение
|
||
Создана система централизованного управления данными с кешированием и дедупликацией:
|
||
|
||
1. **DataManager** - умный менеджер данных
|
||
- Кеширование с TTL (Time To Live)
|
||
- Дедупликация одновременных запросов
|
||
- Система подписки на изменения
|
||
- Логирование для отладки
|
||
|
||
2. **API обертки**:
|
||
- `calendarApi.js` - события календаря (TTL 30 сек)
|
||
- `departmentsApi.js` - отделы пользователя (TTL 60 сек)
|
||
|
||
3. **Рефакторинг calendarWidget.js**:
|
||
- Заменены прямые `fetch()` на API обертки
|
||
- Автоматическое переиспользование данных между виджетами
|
||
|
||
## 🧪 Тестирование
|
||
|
||
### 1. Проверка работы календаря
|
||
|
||
```bash
|
||
# На сервере
|
||
cd /home/igor/EUSRR
|
||
git pull origin master
|
||
sudo systemctl restart eusrr
|
||
```
|
||
|
||
### 2. Откройте DevTools в браузере
|
||
|
||
1. **Открыть главную страницу** (`/`)
|
||
2. **F12 → вкладка Network**
|
||
3. **Очистить** (кнопка 🚫)
|
||
4. **Обновить страницу** (F5)
|
||
|
||
**Ожидаемый результат:**
|
||
- `/api/v1/departments/my-departments/` - **1 раз** (было 3)
|
||
- `/api/v1/calendar/events/?start=...` - **1 раз на период** (было 2-3)
|
||
|
||
### 3. Проверка кеширования
|
||
|
||
1. **Вкладка Console в DevTools**
|
||
2. **Обновите страницу** (F5)
|
||
3. Ищите логи:
|
||
```
|
||
[DataManager] Fetching: departments:my
|
||
[DataManager] Fetching: calendar:events:{"end":"...","start":"..."}
|
||
```
|
||
|
||
4. **Переключите календарь** (Компания → Отдел → Компания)
|
||
5. Ищите логи:
|
||
```
|
||
[DataManager] Cache HIT: calendar:events:{"end":"...","start":"..."}
|
||
```
|
||
|
||
### 4. Проверка дедупликации
|
||
|
||
1. **Console в DevTools**
|
||
2. **Быстро несколько раз** переключите календарь
|
||
3. Ищите логи:
|
||
```
|
||
[DataManager] Request DEDUPED: calendar:events:...
|
||
```
|
||
|
||
## 📊 Метрики до/после
|
||
|
||
### ДО рефакторинга:
|
||
- **API запросов:** ~10-15
|
||
- **Дублирования:** 3-4x для departments, 2-3x для calendar
|
||
- **Время загрузки:** зависит от сети
|
||
|
||
### ПОСЛЕ рефакторинга:
|
||
- **API запросов:** 3-5 (первая загрузка)
|
||
- **Дублирования:** 0 (кеш + дедупликация)
|
||
- **Повторная загрузка:** мгновенная (кеш)
|
||
|
||
## 🐛 Отладка
|
||
|
||
### Проверить статистику кеша:
|
||
|
||
```javascript
|
||
// В консоли браузера
|
||
window.dataManager.getStats()
|
||
// → {cacheSize: 5, pendingCount: 0, subscribersCount: 0, keys: [...]}
|
||
```
|
||
|
||
### Очистить кеш вручную:
|
||
|
||
```javascript
|
||
window.dataManager.clear()
|
||
```
|
||
|
||
### Инвалидировать конкретные данные:
|
||
|
||
```javascript
|
||
// Календарь
|
||
window.dataManager.invalidatePattern(/^calendar:/)
|
||
|
||
// Отделы
|
||
window.dataManager.invalidate('departments:my')
|
||
```
|
||
|
||
## ⚠️ Возможные проблемы
|
||
|
||
### 1. "Старые данные в календаре"
|
||
**Причина:** Долгий TTL кеша (30 сек)
|
||
**Решение:** Уменьшить TTL в `calendarApi.js` или добавить кнопку "Обновить"
|
||
|
||
### 2. "Календарь не загружается"
|
||
**Причина:** Ошибка в импортах модулей
|
||
**Решение:** Проверить консоль на ошибки импорта
|
||
|
||
### 3. "Лог 'Cache HIT' не появляется"
|
||
**Причина:** Слишком короткий TTL или кеш очищается
|
||
**Решение:** Проверить `dataManager.getStats()` в консоли
|
||
|
||
## 🚀 Следующие шаги
|
||
|
||
### Приоритет 2: Расширить кеширование
|
||
|
||
Добавить обертки для других API:
|
||
- `notificationsApi.js` - уведомления
|
||
- `postsApi.js` - посты ленты
|
||
- `employeesApi.js` - сотрудники
|
||
|
||
### Приоритет 3: Batch API
|
||
|
||
Создать endpoint для загрузки нескольких периодов календаря за 1 запрос:
|
||
|
||
```python
|
||
# backend/api/v1/views.py
|
||
class BatchCalendarEventsView(APIView):
|
||
def post(self, request):
|
||
ranges = request.data.get('ranges', [])
|
||
result = {}
|
||
for r in ranges:
|
||
key = f"{r['start']}_{r['end']}"
|
||
result[key] = get_events(r['start'], r['end'])
|
||
return Response(result)
|
||
```
|
||
|
||
## 📝 Заметки
|
||
|
||
- Кеш хранится **в памяти** (очищается при перезагрузке страницы)
|
||
- TTL можно настроить для каждого запроса
|
||
- DataManager работает как singleton (один экземпляр на всё приложение)
|
||
- Дедупликация работает только для **одновременных** запросов
|