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:
Top comments (0)