React.js - Custom Hook useAxios()
Tags: javascript, webdev, programming, react
Published: 2022-02-24 03:02:29

![Hooks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24c2xy8wa5tva4ln72s2.png)

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

```javascript
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

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment). 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:

- https://pt-br.reactjs.org/docs/hooks-custom.html
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment