Реализация useFetch — дедупликация запросов, кэш, reactive refresh, обработка ошибок

// Реализуем useFetch/useAsyncData без Vue-рантайма:
// ключевые паттерны — дедупликация, кэш, lazy loading.

class DataStore {
  constructor() {
    this._cache = new Map()
    this._pending = new Map()  // дедупликация одновременных запросов
  }

  async fetch(key, fetcher, options = {}) {
    const {
      lazy = false,
      transform = null,
      defaultValue = null,
      server = true,
      forceRefresh = false,
    } = options

    // Проверяем кэш
    if (!forceRefresh && this._cache.has(key)) {
      console.log(`[Cache HIT] "${key}"`)
      return this._createRef(this._cache.get(key), false, null)
    }

    // Дедупликация: если запрос уже летит — ждём его
    if (this._pending.has(key)) {
      console.log(`[Dedup] "${key}" — ждём уже выполняющийся запрос`)
      const existing = await this._pending.get(key)
      return this._createRef(existing, false, null)
    }

    if (lazy) {
      // Не блокируем — возвращаем сразу с defaultValue
      const ref = this._createRef(defaultValue, true, null)
      fetcher().then(result => {
        const transformed = transform ? transform(result) : result
        this._cache.set(key, transformed)
        ref._update(transformed, false, null)
      }).catch(err => {
        ref._update(null, false, err.message)
      })
      return ref
    }

    // Синхронный запрос (блокирует рендер в SSR)
    const promise = fetcher().then(result => {
      const transformed = transform ? transform(result) : result
      this._cache.set(key, transformed)
      this._pending.delete(key)
      return transformed
    }).catch(err => {
      this._pending.delete(key)
      throw err
    })

    this._pending.set(key, promise)

    try {
      const result = await promise
      return this._createRef(result, false, null)
    } catch (err) {
      return this._createRef(null, false, err.message)
    }
  }

  _createRef(initialData, initialPending, initialError) {
    let data = initialData
    let pending = initialPending
    let error = initialError
    const listeners = new Set()

    const ref = {
      get data() { return data },
      get pending() { return pending },
      get error() { return error },
      subscribe(fn) {
        listeners.add(fn)
        fn({ data, pending, error })
        return () => listeners.delete(fn)
      },
      _update(newData, newPending, newError) {
        data = newData; pending = newPending; error = newError
        listeners.forEach(fn => fn({ data, pending, error }))
      }
    }
    return ref
  }

  clearCache(key) {
    this._cache.delete(key)
  }
}

// --- Симуляция API ---
const store = new DataStore()

let apiCallCount = 0
async function fakeAPI(endpoint) {
  apiCallCount++
  await new Promise(r => setTimeout(r, 30))
  if (endpoint === '/api/error') throw new Error('500 Internal Server Error')
  if (endpoint === '/api/users') return [{ id: 1, name: 'Иван' }, { id: 2, name: 'Пётр' }]
  if (endpoint.startsWith('/api/users/')) {
    const id = endpoint.split('/').at(-1)
    return { id: Number(id), name: `Пользователь #${id}`, email: `user${id}@mail.ru` }
  }
  return { status: 'ok' }
}

// === Тесты ===
async function runTests() {
  console.log('=== Базовый запрос ===')
  const ref1 = await store.fetch('users', () => fakeAPI('/api/users'))
  console.log('data:', ref1.data.map(u => u.name))
  console.log('pending:', ref1.pending)
  console.log('error:', ref1.error)

  console.log('\n=== Кэш (второй вызов) ===')
  const ref2 = await store.fetch('users', () => fakeAPI('/api/users'))
  console.log('Кэш работает:', ref1.data === ref2.data)
  console.log('Вызовов API:', apiCallCount)  // 1

  console.log('\n=== Дедупликация ===')
  apiCallCount = 0
  store.clearCache('dedup-key')
  const [r1, r2, r3] = await Promise.all([
    store.fetch('dedup-key', () => fakeAPI('/api/users')),
    store.fetch('dedup-key', () => fakeAPI('/api/users')),
    store.fetch('dedup-key', () => fakeAPI('/api/users')),
  ])
  console.log('3 вызовов → реальных запросов:', apiCallCount)  // 1

  console.log('\n=== Transform ===')
  store.clearCache('transformed')
  const ref3 = await store.fetch('transformed', () => fakeAPI('/api/users'), {
    transform: users => users.map(u => u.name.toUpperCase())
  })
  console.log('Transformed:', ref3.data)

  console.log('\n=== Lazy loading ===')
  store.clearCache('lazy-data')
  const ref4 = await store.fetch('lazy-data', () => fakeAPI('/api/users/5'), {
    lazy: true,
    defaultValue: [],
  })
  console.log('Сразу (lazy):', ref4.data, ref4.pending)
  await new Promise(r => setTimeout(r, 100))
  console.log('После загрузки:', ref4.data)

  console.log('\n=== Обработка ошибки ===')
  const ref5 = await store.fetch('error-data', () => fakeAPI('/api/error'))
  console.log('error:', ref5.error)
  console.log('data:', ref5.data)
}

runTests()