Перейти на PRO

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

Тип вопроса: Vue Вероятность: 10% Категория: Frontend Разработчик

Ответ

В Vue 3 composables — это функции, использующие Composition API для инкапсуляции логики. Для работы с API популярны:

  1. useFetch — обертка над fetch с состоянием загрузки, ошибки и данными:
export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const isLoading = ref(false);

  const execute = async () => {
    isLoading.value = true;
    try {
      const res = await fetch(url);
      data.value = await res.json();
    } catch (err) {
      error.value = err;
    } finally {
      isLoading.value = false;
    }
  };

  return { data, error, isLoading, execute };
}
  1. useAxios — аналогичный хук для Axios
  2. useSWR — для кэширования и повторных запросов
  3. useQuery (из Vue Query) — для сложных кэш-стратегий

Ключевые преимущества: переиспользуемость, изоляция состояния, композиция логики. Можно добавлять abort-контроллеры, retry-логику и т.д.

Ответ 18+ 🔞

А, ну это же про эти ваши композаблы в Vue 3, да? Ну, типа, функции, которые всю логику по работе с API в себя заворачивают, чтобы не городить одно и то же в каждом компоненте. Красота, внатуре.

Смотри, самый простой и понятный пример — это useFetch. Берёшь обычный fetch, оборачиваешь его в реактивность, и вуаля — у тебя уже готовая хуйня с загрузкой, ошибками и данными. Вот, глянь, как это выглядит, только не пугайся:

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const isLoading = ref(false);

  const execute = async () => {
    isLoading.value = true;
    try {
      const res = await fetch(url);
      data.value = await res.json();
    } catch (err) {
      error.value = err;
    } finally {
      isLoading.value = false;
    }
  };

  return { data, error, isLoading, execute };
}

Видишь? Всё просто, как три копейки. Создал три рефа — под данные, ошибку и флаг загрузки. Потом функция execute, которая этот самый флаг включает, дергает API, и либо данные кладёт, либо ошибку ловит. И в конце, блядь, в finally этот флаг выключает, чтобы не зависнуть навечно. Гениально и без подвохов.

Ну а если тебе fetch — говно собачье, и ты фанат Axios, то есть useAxios. Та же песня, только с другой библиотекой. Хочешь умного кэширования и чтобы запросы сами обновлялись? Тогда useSWR или useQuery из Vue Query тебе в помощь. Это уже для сложных случаев, когда нужно не просто получить данные, а управлять ими, как царь.

А главная фишка всех этих композаблов в чём? В том, что ты эту логику пишешь ОДИН РАЗ, ёпта! Потом таскаешь её куда хочешь, как чемодан без ручки. Состояние изолировано, всё переиспользуется, и можно композировать разные хуки между собой — один вызывает другой, и получается такая многоэтажная конструкция, но при этом всё читаемо. Можно ещё abort-контроллеры прикрутить, чтобы запросы отменять, или retry-логику на случай, если сеть глючит. В общем, простор для творчества — овердохуища.

© ХакСобесов, 2026
support@hacksobesov.com