Como um desenvolvedor amplamente autodidata, eu coloquei o vasto mundo dos tutoriais de internet grátis/paga através de seus passos. Algo que eu vejo aparecer repetidamente em tutoriais executando pedidos HTTP é o uso de uma biblioteca JavaScript chamada Axios. Eu queria entender porque uma gama tão ampla de educadores de desenvolvimento web estavam fazendo uso dessa biblioteca aparentemente discreta. Então eu decidi pesquisar para entregar uma explicação muito simples e direta do que o Axios oferece e porque ele vale (provavelmente) a pena usar.
O que ele faz
Em resumo, Axios é uma biblioteca Javascript usada para fazer requisições HTTP do node.js ou XMLHttpRequests do navegador que também suporta a API ES6 Promise. Óptimo, então a partir daí reunimo-la faz algo que já podemos fazer e que recentemente foi melhorado significativamente… Então porque se preocupar?
O que pretende melhorar: .fetch()
Fetch usa um processo de dois passos quando se lida com dados JSON; depois de fazer uma requisição inicial você precisará então chamar o método .json() na resposta para receber o objecto de dados real. Se eu tivesse um pedido de busca para obter de volta um objeto de motoristas relevantes para o meu aplicativo de aquisição de carro, eu poderia ter algo como o seguinte:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
Isso devolveria uma promessa pendente e um objeto de resposta me informando que meu pedido foi bem sucedido, mas onde estão meus dados?! Temos de nos lembrar de passar a nossa resposta ao método .json() também.
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Agora isso não é grande coisa, como muitas coisas que realmente se resume à memorização da sintaxe. Mas como desenvolvedores, somos simultaneamente as criaturas mais preguiçosas e eficientes do planeta – então qualquer tipo de abreviação ou economia de tempo vale a pena considerar, digite Axios.
Melhor manipulação de erros
Existe algum trabalho extra que precisamos colocar no nosso fim (novamente, poderia ser argumentado que isso é apenas uma questão de memorização de sintaxe) para o resultado desejado quando se trata de registrar corretamente os erros de resposta com .fetch(). MDN explica:
A
fetch()promessa será rejeitada com umTypeErrorquando um erro de rede for encontrado ou CORS for mal configurado no lado do servidor, embora isto normalmente signifique problemas de permissão ou similares – um 404 não constitui um erro de rede, por exemplo.
Vamos assumir que há algo de errado com a nossa variável baseUrl. A expectativa do output para o seguinte bloco de código seria erro, mas em vez disso está tudo bem. Porque é que isto?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
E acontece que fetch() apenas rejeita promessas em situações de erro de rede relativamente raras como uma falha de procura de DNS. Felizmente fetch() fornece uma simples bandeira ok que indica se o código de status de uma resposta está ou não na faixa de sucesso. Geralmente o que acontece é que você vai acabar escrevendo uma função de tratamento de erros de tamanho único para ser usada em todas as suas fetch() chamadas.
Instalando Axios
Grabbing new libraries is easy as pie now (Mmm… rhubarb), eu prefiro npm. Na raiz do terminal aberto da pasta do seu projecto, corra npm install axios e está tudo pronto. Agora para conseguir o mesmo pedido de fetch que fizemos anteriormente, podemos invocar axios.get() no lugar do nosso método fetch como so:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Usando axios removemos a necessidade de passar os resultados do pedido HTTP para o método .json(). O Axios simplesmente retorna o objeto de dados que você espera imediatamente. Além disso, qualquer tipo de erro com uma requisição HTTP executará com sucesso o bloco .catch() direto da caixa. Aqui está um breve resumo de todos os seus recursos primários, incluindo alguns que eu não cobri diretamente da página do GitHub:
- Realizar pedidos XMLHttpRequests do navegador
- Realizar pedidos http do nó.js
- Suporta a API Promessa
- Interceptar pedido e resposta
- Transformar pedido e dados de resposta
- Cancelar pedidos
- Transformações automáticas para dados JSON
- Suporte do lado do cliente para proteção contra XSRF
>
Em resumo, Axios é uma melhoria da qualidade de vida mais do que qualquer outra coisa. Mas fazer muitos pequenos ajustes incrementais na qualidade de vida de um fluxo de trabalho pode melhorar drasticamente a qualidade e velocidade de desenvolvimento.