Какие хуки или composables используются для работы с API во Vue 3

Что проверяют

Понимаете ли вы, что во Vue 3 нет встроенного «хука для запросов», и умеете ли собрать его из Composition API или выбрать готовое решение. Следом обычно просят показать свой useFetch и спрашивают, что будет, если параметры поменяются, пока предыдущий ответ ещё не пришёл.

Как отвечать

Сначала строительные блоки из самого Vue:

• ref и shallowRef: состояние data, error, isLoading. Для больших ответов shallowRef дешевле, глубокая реактивность там не нужна;
• watch и watchEffect: повторный запрос при смене параметров. toValue() позволяет принимать аргумент как значение, ref или геттер;
• onWatcherCleanup (с Vue 3.5) или аргумент onCleanup в колбэке watch: отмена предыдущего запроса через AbortController;
• onMounted: только если запросу действительно нужен DOM. Чаще запрос стартует прямо в setup.

Затем готовые решения и когда их брать:

• useFetch из VueUse: лёгкая обёртка над fetch с реактивным URL, отменой и перезапуском;
• TanStack Query (@tanstack/vue-query): useQuery и useMutation с кэшем по ключу, дедупликацией, фоновым обновлением и инвалидацией. Подходит, когда одни и те же данные нужны многим экранам;
• Pinia Colada: похожий подход, построенный поверх Pinia;
• Nuxt: useFetch и useAsyncData передают данные с сервера на клиент без повторного запроса, а в обработчиках кликов используют $fetch.

Свой composable хорош, когда запросов немного. Скажите, что он должен принимать реактивный аргумент, сбрасывать error перед новым запросом, отменять устаревший запрос и возвращать состояние, а не сам промис.

Где спотыкаются

Не думают о гонке запросов. Пользователь быстро переключает фильтр, старый ответ приходит последним и перезаписывает новый. Без отмены или проверки актуальности это реальный баг.

Передают URL обычной строкой. Composable запрашивает данные один раз и не реагирует на смену параметров маршрута.

Называют ref и watch «хуками для API» и на этом останавливаются. Это реактивность, а вопрос о том, как построить из неё загрузку с кэшем, ошибками и отменой.