DEV Community

Jhony Walker
Jhony Walker

Posted on

React.js - Custom Hook useAxios()

Hooks

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;
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode

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:

Discussion (0)