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

Question

[Илья]

Всем привет, начал изучать реакт, работаю с api.
С помощью функции fetch я вытаскиваю json из апишки, обращаться к апи буду часто за разными кусками кода, поэтому fetch нужно вынести в отдельный модуль и подключать его при необходимости. После того как выгреб json, я меняю состояния компоненту, мол всё загрузилось, ошибок нет. А как мне сделать из этого отдельный полноценный модуль? Какие там должны быть параметры, url, и колбэки для изменения состояний? Подскажите, а то опыта в этом деле мало. Как правильнее будет сделать? Спасибо.

Answer 1

[hellcaster]

Я использую такой (это хук, но может поможет):

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) {} // если прозойшла ошибка

Comments

[Илья]

вот тоже думал сделать через async/await, но там начал babel ругаться (надо будет поставить там модуль какой-то), решил пока разобраться с fetch. Даже не знаю, что лучше использовать)