Hook ajax react

hook_ajax_react.js

// Тестовый ajax-запрос

// Использование хука

const {loading, request, error, cleanError} = useHttp();

const testAjaxHandler = async () => {
    try {
        const data = await request(
                'http://localhost:8000/api/api123',
                'POST',
                {test: 123},
            );
        console.log(data);
    } catch (e) {}
}


// Кнопка в редндере отображения, выполняющая запрос при клике

<button onClick={testAjaxHandler}>Test ajax</button>


src/hooks/http.hook.js

import {useState, useCallback} from 'react';

export const useHttp = () => {
    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 || 'Error in ajax');
            }

            setLoading(false);

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

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

    return {loading, request, error, cleanError};
};