React.js - Custom Hook useAxios()

#javascript #webdev #programming #react

Como desenvolvedor frontend, em todo projeto React, devemos chamar API's em vários componentes para obter seus respectivos dados. Além disso, também queremos lidar com cenários de erro e definir carregadores em segundo plano.

Suponha que temos vários componentes nos quais queremos buscar alguns dados do servidor e exibi-los na interface do usuário, partindo desse ponto escrever o mesmo código em todos os componentes definitivamente não é recomendado. Para evitar esses casos, podemos usar Axios como um Hook personalizado.

Vamos criar um *useAxios como um Hook personalizado

import { useEffect, useState } de "reagir"; 
importar axios de 'axios'; 
const useAxios = (configParams) => { 
    axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'; 
    const [res, setRes] = useState(''); 
    const [err, setErr] = useState(''); 
    const [carregando, setLoading] = useState(true); 
    useEffect(() => { 
       fetchDataUsingAxios(configParams); 
    }, []); 
    const fetchDataUsingAxios = async() => { 
        await axios.request(configParams) .then 
        (res => setRes(res) 
        .catch(err => setErr(err)) 
        .finally(() => setLoading(false)); 
    } 
    return [res, err, carregando];

export default useAxios;

1) Definimos a base URL padrão para que qualquer tipo de solicitação (get/post/..) seja feita apenas para este ponto final (https://jsonplaceholder.typicode.com).
2) Criamos três estados (resposta, erro e carregamento).
3) Usamos async e await para fazer solicitações HTTP assíncronas para que não bloqueie nenhum outro thread.
4) axios.request é muito útil para fazer qualquer tipo de solicitação HTTP, pois espera apenas que o objeto config{url, method, body, headers} e o resto sejam tratados automaticamente.
5) Poderíamos também ter usado axios.get ou axios.post, caso queira usar a escolha é sua.

Para a segunda parte, vou mostrar como usar useAxios em qualquer um de seus componentes

import { useEffect, useState } de "react/cjs/react.development"; 
importe useAxios de "./useAxios"; 
const SeuComponente = () => { 
     const [data, setData] = useState(null); 
     const [todo, isError, isLoading] = useAxios({ 
           url: '/todos/2', 
           método: 'get', 
           corpo: {...}, 
           cabeçalhos: {...} 
     }); 
     use Effect(() => { 
        if(todo && todo.data) setData(todo.data) 
     }, [todo]); 
     return ( 
       <> {isLoading ? ( 
            <p>isLoading...</p> 
       ) : ( 
           <div> 
                {isError && <p>{isError.
                {data && <p>{data.title}</p>}</div> 
           </div> 
        )} </> 
      ) 
} 
export default YourComponent;

Aqui criamos um objeto de configuração que consiste em {url, method, body, and headers} e passamos para o useAxios({….}) que fará a chamada HTTP e retornará o array de valores [res, err, loading] e estamos armazenando-os em [todo, isError, isLoading] por meio da desestruturação. O useEffect tem uma verificação de dependência na variável “todo”, se ocorrer alguma alteração, ele atualizará o estado local seguido pela interface do usuário.

Fontes onde pesquisei esse conteúdo:

DEV Community

React.js - Custom Hook useAxios()

Top comments (0)