Задать вопрос
@ravewave

Как ораганизовать функцию fetch в качестве модуля?

Всем привет, начал изучать реакт, работаю с api.
С помощью функции fetch я вытаскиваю json из апишки, обращаться к апи буду часто за разными кусками кода, поэтому fetch нужно вынести в отдельный модуль и подключать его при необходимости. После того как выгреб json, я меняю состояния компоненту, мол всё загрузилось, ошибок нет. А как мне сделать из этого отдельный полноценный модуль? Какие там должны быть параметры, url, и колбэки для изменения состояний? Подскажите, а то опыта в этом деле мало. Как правильнее будет сделать? Спасибо.
  • Вопрос задан
  • 161 просмотр
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
web_Developer_Victor
@web_Developer_Victor
Что такое google?
Я использую такой (это хук, но может поможет):
spoiler

import {useState, useCallback} from 'react';

export default () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const request = useCallback(async (url, method = `GET`, body = null, headers = {}) => {
    setLoading(true);

    try {
      if (body) {
        body = JSON.stringify(body);
        headers[`Content-Type`] = `application/json`;
      }

      const response = await fetch(url, { method, body, headers });
      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || 'Something went wrong');
      }

      setLoading(false);

      return data;
    } catch (e) {
      setLoading(false);
      setError(e.message);
      throw e;
    }
  }, []);

  const clearError = useCallback(() => setError(null), []);

  return {loading, request, error, clearError}
}


Использовать так:
const {loading, request, error, clearError} = useHttp();

const handler = async () => {
  const response = await request(`/api/auth/login`, `POST`, {...form}); // можно четвертым передать headers
 }

if (loading) {} // если грузятся данние
if (error) {} // если прозойшла ошибка
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы