Перейти на PRO

Какие есть опции у useFetch

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

Ответ

useFetch — это кастомный хук, часто используемый для упрощения HTTP-запросов. Основные опции:

  1. url — обязательный параметр, адрес запроса.
  2. method — HTTP-метод (GET, POST, и т.д.), по умолчанию GET.
  3. headers — объект с заголовками ({ 'Content-Type': 'application/json' }).
  4. body — данные для отправки (обычно JSON.stringify(data)).
  5. onSuccess/onError — колбэки при успехе/ошибке.
  6. initialData — начальное состояние данных до загрузки.
  7. dependencies — массив зависимостей для рефетча (как в useEffect).

Пример:

const { data, loading, error } = useFetch({
  url: '/api/users',
  method: 'POST',
  headers: { 'Authorization': 'Bearer token' },
  body: JSON.stringify({ name: 'John' }),
  onSuccess: (data) => console.log('Успех:', data),
});

Ответ 18+ 🔞

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

Основные пизюлины, которые в него можно запихнуть:

  1. url — это, блядь, святое. Без адреса куда слать запрос — ты просто мудак, который в пустоту стучится. Обязательный, ёпта.
  2. method — ну, тип запроса: GET, POST, PUT, DELETE. Если не указал — по умолчанию GET, логично же.
  3. headers — сюда всякую хуйню про Content-Type или авторизацию пихаешь. Объектиком, типа { 'Authorization': 'Bearer твой_токен' }.
  4. body — это то, что ты на сервер отправляешь. Обычно его в JSON.stringify заворачиваешь, а то сервер обосрётся.
  5. onSuccess / onError — колбэки, ёбушки-воробушки. Вызовутся, когда запрос удался или накрылся медным тазом. Удобно, чтобы не городить проверки в основном коде.
  6. initialData — начальные данные, пока запрос летит. Чтобы не светить undefined и пользователь не охуел.
  7. dependencies — массив зависимостей, как в useEffect. Если что-то в нём поменялось — хук автоматом рефетч сделает. Умно, блядь.

Вот тебе живой пример, смотри:

const { data, loading, error } = useFetch({
  url: '/api/users',
  method: 'POST',
  headers: { 'Authorization': 'Bearer token' },
  body: JSON.stringify({ name: 'John' }),
  onSuccess: (data) => console.log('Успех:', data),
});

И всё, сука! Возвращает тебе объект с data, loading и error. Сидишь и работаешь, а не изобретаешь велосипед каждый раз. Красота, да и только.

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