Fetch a cualquier API Custom Hook

11847

Que tal si hacemos un hook para cualquier llamado fetch api?
Ademas, lo vamos a hacer con manejo de errores y loading

/src/hooks/fetchApiHook.js

// /fetchApiHook.jsimport { useState, useEffect } from 'react';exportconst useFetchData = (BASE_URL = '', error_msg = 'An error has ocurred getting the data') => {
    const [fetch_data, setFetchData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    useEffect(() => {
        const fetchData = async () => {
            setLoading(true);
            //Pedimos los datos a la apitry {
                const response = awaitwindow.fetch(BASE_URL);
                if (!response.ok) {
                    thrownewError(`Http status ${response.status}`);
                }
                const data = await response.json();
                console.log(data);
                setFetchData(data.results);
            } catch (error) {
//Si hay un error ...console.error(error.message);
                setError(error_msg)
            }
            setLoading(false);
        }
        fetchData();
    }, [BASE_URL]); //Hacer enfasis en la url//Retornamos nuestro fetch_data como data, nuestro loading y errorreturn { data: fetch_data, loading, error };
}

Ahora en el componente al cual queremos aplicar nuestro Custom Hook

import React  from"react";
//Impotamos nuestro custom hookimport { useFetchData } from"../hooks/useFetchData";
exportconst Component = () => { 
	const BASE_URL = 'aqui el url de su api';
	const { data, loading, error } = useFetchData(BASE_URL); // Guardamos las variables que nos retorna nuestro custom hook, pasanadole como parametro la url de la api, el mensaje del error es opcionalif (loading) return"Loading ...";
	if (error) return`Error ${error}`;
	return(
	//Un ejemplo de como mostrar los datos
		{data.map((element) => (
         		 <pkey={element.id}>{element.name}</p>
        	))}
         	
	)
}