Какие знаешь composables для работы с API?

Composables для работы с API во Vue 3

В Vue 3 Composables (композиции) — это функции, использующие Composition API для инкапсуляции и повторного использования логики с состоянием. Они являются мощной альтернативой миксинам и позволяют органично работать с асинхронными операциями, такими как API-запросы. Вот ключевые подходы и примеры:

Базовый Composable для Fetch-запросов

Самый распространённый паттерн — создание универсального useFetch composable, который обрабатывает состояние загрузки, данные и ошибки:

// useFetch.js
import { ref, reactive } from 'vue'

export function useFetch(url, options = {}) {
  const data = ref(null)
  const error = ref(null)
  const isLoading = ref(false)
  
  const fetchData = async () => {
    isLoading.value = true
    error.value = null
    
    try {
      const response = await fetch(url, options)
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      data.value = await response.json()
    } catch (err) {
      error.value = err.message || 'Произошла ошибка'
    } finally {
      isLoading.value = false
    }
  }
  
  return {
    data,
    error,
    isLoading,
    fetchData
  }
}

Composable с поддержкой методов и параметров

Более продвинутая версия с поддержкой различных HTTP-методов и параметров запроса:

// useApi.js
import { ref, computed } from 'vue'
import axios from 'axios' // или другая HTTP-библиотека

export function useApi(baseURL = 'https://api.example.com') {
  const loading = ref(false)
  const error = ref(null)
  const data = ref(null)
  
  const api = axios.create({
    baseURL,
    timeout: 10000
  })
  
  const execute = async (method, endpoint, payload = null) => {
    loading.value = true
    error.value = null
    
    try {
      const response = await api({
        method,
        url: endpoint,
        data: payload
      })
      
      data.value = response.data
      return response.data
    } catch (err) {
      error.value = err.response?.data?.message || err.message
      throw err
    } finally {
      loading.value = false
    }
  }
  
  return {
    loading: computed(() => loading.value),
    error: computed(() => error.value),
    data: computed(() => data.value),
    get: (endpoint, params) => execute('GET', endpoint, null, { params }),
    post: (endpoint, payload) => execute('POST', endpoint, payload),
    put: (endpoint, payload) => execute('PUT', endpoint, payload),
    delete: (endpoint) => execute('DELETE', endpoint)
  }
}

Специализированные Composables

На практике часто создают специализированные composables для конкретных сущностей:

// useUsers.js
import { useApi } from './useApi'

export function useUsers() {
  const api = useApi('https://api.example.com/users')
  
  const fetchUsers = async () => {
    return await api.get('/')
  }
  
  const createUser = async (userData) => {
    return await api.post('/', userData)
  }
  
  const updateUser = async (id, userData) => {
    return await api.put(`/${id}`, userData)
  }
  
  return {
    ...api,
    fetchUsers,
    createUser,
    updateUser
  }
}

Ключевые преимущества composables для API

• Переиспользуемость: Однажды созданный composable можно использовать в любом компоненте
• Инкапсуляция логики: Вся логика работы с API скрыта внутри composable
• Реактивность: Автоматическая реактивность через ref и reactive
• Композиционность: Возможность комбинировать несколько composables
• Тестируемость: Легко тестировать изолированно от компонентов

Практический пример использования

<!-- UserComponent.vue -->
<script setup>
import { useUsers } from '@/composables/useUsers'

const { 
  loading, 
  error, 
  data: users, 
  fetchUsers 
} = useUsers()

// Автоматический вызов при монтировании
onMounted(() => {
  fetchUsers()
})

// Ручной вызов с обработкой ошибок
const handleRefresh = async () => {
  try {
    await fetchUsers()
  } catch (err) {
    console.error('Ошибка загрузки пользователей:', err)
  }
}
</script>

<template>
  <div>
    <button @click="handleRefresh" :disabled="loading">
      {{ loading ? 'Загрузка...' : 'Обновить' }}
    </button>
    
    <div v-if="error" class="error">
      {{ error }}
    </div>
    
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

Продвинутые техники

1. Кеширование: Добавление кеша для избежания лишних запросов
2. Авто-отмена: Отмена предыдущих запросов при новых вызовах
3. Повторные попытки: Механизм retry для неудачных запросов
4. Инвалидация: Управление актуальностью кешированных данных
5. Оптимистичные обновления: Мгновенное обновление UI с последующей синхронизацией с сервером

Composables для работы с API — это фундаментальный паттерн во Vue 3, который обеспечивает чистоту кода, повторное использование и поддерживаемость приложений, работающих с внешними данными.