Como Fazer Requisições AJAX com o AXIOS
Certamente quando estava desenvolvendo uma aplicação web em algum momento precisou fazer requisições assíncronas, ou seja, sem precisar recarregar (reload) toda a página.
Embora seja possível utilizar os próprios recursos nativos do JavaScript para fazer operações assíncronas (AJAX), existem implementações/libs que facilitam o nosso trabalho, porque tem uma abstração muito mais simples e fácil de aplicar.
Por muitos anos o jQuery reinou nas aplicações web, mas, depois da popularização de poderosos frameworks JavaScript como Angular, React, Vue JS e etc, a lib do jQuery perdeu e vem perdendo muito espaço.
Era muito comum usar os recursos de Ajax que a lib do jQuery oferecia, e sendo bastante sincero, a questão de Ajax do jQuery é muito boa, porque tem uma implementação muito simples. Mas, existem também outras opções mais diretas para resolver isso, e neste termo temos o AXIOS, que é uma biblioteca JS muito simples e fácil de usar, com um único e exclusivo propósito de criar requisições AJAX.
Por que o axios?
Como mencionado acima, o propósito da biblioteca do axios é simplesmente fazer requisições ajax, isso significa que é uma lib muito pequena e leve. Além de ter uma implementação muito simples e enxuta.
Outra característica importante é compatibilidade com diversos Browsers diferentes.
Como usar o AXIOS?
Primeiro passo é instalar a lib do axios no projeto que irá precisar trabalhar com AJAX. E existem algumas formas de fazer isso, uma delas é usar algum gerenciador de dependências para baixar, outra é simplesmente incluir a CDN online da lib no projeto.
Baixar o axios com o npm:
npm install axios
Baixar o axios com yarn:
yarn install axios
Baixar o axios com bower:
bower install axios
Usar CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Qualquer uma das opções acima é valida. Se tiver trabalhar com algum framework JavaScript, neste caso é recomendado baixar a lib para o projeto, basta usar o seu gerenciador de dependências e baixar, o mais comum é o npm.
Uma vez que incluiu a biblioteca no projeto, agora nos resta desfrutar dos recursos e fazer nossas requisições de forma assíncrona.
Sintaxe do axios:
O axios tem como característica principal ser muito simples, e por isso está crescendo muito em popularidade. Veja um exemplo simples:
axios.get('url', {})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
Basicamente usa o recurso “axios”, o verbo http da requisição (get, post, put, patch, delete, options, head), e usa o método then() para recuperar o promise, que é retorno em caso de sucesso, e o método catch() que é o retorno de uma exception.
O método get() espera 2 parâmetros, o primeiro é a URL que será feita a requisição AJAX, e segundo é opcional, que são os dados (parâmetros) que serão enviados.
Outra implementação possível para fazer requisições AJAX com o axios é assim:
axios({
method: 'post', // verbo http
url: 'http://url-api.com/api/v1/recurso', // url
data: {
name: 'Carlos', // Parâmetro 1 enviado
company: 'EspecializaTi' // Parâmetro 2 enviado
}
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
Confesso que a primeira implementação me seduz mais, porque para mim é mais simples e organizada.
Vamos criar uma aplicação prática, com axios?
Acredito que a melhor forma de exemplificar algo é através da prática, para isso vamos criar uma pequena aplicação, que vai buscar dados em uma outra aplicação, neste caso vamos usar o Postmon, que oferece um serviço simples para consulta de CEP.
A API do Postmon é muito simples, basta enviar um requisição GET para a API informando com o cep, ele responde com as informações do endereço:
http://api.postmon.com.br/v1/cep/*cep_a_consultar*
Esse é um projeto muito bem avaliado, e foi desenvolvido com Python, veja o GitHub.
Nessa aplicação vamos criar algo bem simples, que será uma implementação toda com JavaScript puro mais o axios para fazer requisições ajax.
Vamos ao passo a passo, primeiro, vamos criar o formulário que vai receber a entrada do CEP pelo usuário:
<form id="form-cep" onsubmit="searchCep()" method="POST">
<input type="text" name="cep" id="cep" placeholder="Informe o cep">
<button type="submit">Buscar</button>
</form>
O formulário tem apenas um campo para entrada do CEP, já deixe a opção onsubmit=”searchCep()” para quando submeter o formulário direcionar para a função searchCep().
Agora o próximo passo é criar a função searchCep() para receber o submit do formulário e fazer as demais operações:
function searchCep () {
alert ('submeteu')
event.preventDefault()
}
Por enquanto deixe apenas um alert() para identificar se entrou na função, e um event.preventDefault() para não deixar o evento padrão (submit) continuar.
Agora o próximo passo é recuperar o valor do campo de cep, note que este campo (input) tem um id=”cep”, vamos recuperar o value a partir do id desta tag e armazenar em uma variável chama cep, assim:
let cep = document.getElementById('cep').value
Agora vamos adicionar a lib do axios, para iniciar a busca do CEP via AJAX:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Agora basta usar o axios para consultar a API, passando dinamicamente o CEP informado pelo usuário e tratar os retornos, precisamos passar o cep na URL da API dinamicamente, para isso podemos concatenar:
`http://api.postmon.com.br/v1/cep/${cep}`
Agora que já temos a URL pronta basta consultar e analisar os logs do retorno, para ver se o promise retorna no then() com sucesso, ou se dá erro e retorna no catch():
axios.get(`http://api.postmon.com.br/v1/cep/${cep}`)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
Para analisar os retornos abre o console do navegador (tecla: F12) e vá na guia Console.
Para analisar o retorno e ver as informações, basta pegar os dados de response.data, veja como debugar:
.then(response => {
alert(response.data.bairro)
alert(response.data.cidade)
alert(response.data.estado)
alert(response.data.logradouro)
})
Próximo passo é exibir os resultados para o usuário, para isso crie uma div oculta para receber o retorno da API:
<div id="results" style="display: none;"></div>
Agora podemos criar um método que vai exibir a div id=”results” e mostrar os resultados do retorno.
Crie uma function que recebe os dados do endereço e exibe o retorno, veja como fica essa função:
function showResults (address) {
// Mostra a div com o resultado
document.getElementById('results').style.display = "block"
// Mostra os resultados:
document.getElementById('results').innerHTML = `
<p><b>Bairro: </b> ${address.bairro} </p>
<p><b>Cidade: </b> ${address.cidade} </p>
<p><b>Logradouro: </b> ${address.logradouro} </p>
<p><b>Cep: </b> ${address.cep} </p>
`
}
E no método then() chame essa função passando o retorno da API:
.then(response => {
showResults (response.data)
})
Preloader com axios:
Podemos também facilmente criar um preloader, com um informativo para o usuário ter ideia que está buscando as informações. Para fazer isso crie uma div com o conteúdo do preloader, ou seja, da mensagem, pode ser um texto, um gif, ou o que quiser:
<div id="preloader" style="display: none;">
Carregando...
</div>
Por default (padrão) essa div deve estar oculta, quando iniciar a busca pode exibi-la.
Para ocultar ou exibir essa div, vamos criar funções para fazer isso:
function startPreloader () {
// Exibe a div de preloader
document.getElementById('preloader').style.display = 'block'
}
function endPreloader () {
// Oculta a div de preloader
document.getElementById('preloader').style.display = 'none'
}
Agora na função searchCep() faça a chamada da função startPreloader(), para mostrar a mensagem de loading para o usuário:
function searchCep () {
startPreloader ()
...
}
O axios além dos métodos then() e catch() oferece o método finally() que pode ser usado para finalizar o preloader, o método finally() sempre que a consulta é finalizada é chamado, independente se der certo ou não.
No método finally() chame a função endPreloader() para finalizar o preloader, ou seja, ocultar a div de preloader:
.finally(() => endPreloader ())
No método startPreloader() é interessante limpar os dados da última busca, porque se buscar o CEP uma vez e buscar novamente é interessante limpar os dados antigos para evitar “sobras” da outra consulta.
function startPreloader () {
// Exibe a div de preloader
document.getElementById('preloader').style.display = 'block'
// Limpa os dados do resultado:
document.getElementById('results').innerHTML = ''
// Oculta a div com o resultado
document.getElementById('results').style.display = 'none'
}
Tratamento de erros com o axios:
No método catch() temos o retorno dos eventuais erros que possam acontecer, que pode ser desde um cep não encontrado, até um erro de retorno, um tempo de resposta muito demorado e etc.
É possível analisar os erros pelo log de retorno, através do response do catch(), assim:
.catch(error => {
console.log(error)
})
Na variável error temos as informações do erro, desde o status (error.status) até outras informações da API, que ela retorna.
Neste método podemos exibir um erro customizado para o usuário, ou explorar o retorno e exibir os erro de acordo com o retorno, neste caso vamos simplesmente exibir uma mensagem de erro para o usuário.
Crie uma div que vai receber as mensagens de erro:
<div id="error" style="display: none;"></div>
Agora no método catch() vamos exibir uma mensagem de erro:
.catch(error => {
// console.log(error)
// Mostra a div com o erro
document.getElementById('error').style.display = 'block'
// Mostra a mensagem
document.getElementById('error').innerHTML = 'Erro inesperado'
})
É interessante também no método startPreloader() ocultar novamente a div id=”error”
document.getElementById('error').style.display = 'none'
Resultado final do busca CEP com axios:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function searchCep () {
// Inicia o preloader
startPreloader ()
// Recupera o value do input cep
let cep = document.getElementById('cep').value
// Inicia requisição AJAX com o axios
axios.get(`http://api.postmon.com.br/v1/cep/${cep}`)
.then(response => {
showResults (response.data)
})
.catch(error => {
// console.log(error)
// Mostra a div com o erro
document.getElementById('error').style.display = 'block'
// Mostra a mensagem
document.getElementById('error').innerHTML = 'Erro inesperado'
})
.finally(() => endPreloader ())
event.preventDefault()
}
function showResults (address) {
// Mostra a div com o resultado
document.getElementById('results').style.display = 'block'
// Mostra os resultados:
document.getElementById('results').innerHTML = `
<p><b>Bairro: </b> ${address.bairro} </p>
<p><b>Cidade: </b> ${address.cidade} </p>
<p><b>Logradouro: </b> ${address.logradouro} </p>
<p><b>Cep: </b> ${address.cep} </p>
`
}
function startPreloader () {
// Exibe a div de preloader
document.getElementById('preloader').style.display = 'block'
// Limpa os dados do resultado:
document.getElementById('results').innerHTML = ''
// Oculta a div com o resultado
document.getElementById('results').style.display = 'none'
// Oculta a div com o erro
document.getElementById('error').style.display = 'none'
}
function endPreloader () {
// Oculta a div de preloader
document.getElementById('preloader').style.display = 'none'
}
</script>
Se quiser adicionar o bootstrap css para formatar o projeto, e deixar com uma aparência visual melhor é uma boa ideia.
No head adicione:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
O conteúdo final fica assim, com as classes do Bootstrap:
<div class="container">
<h1>Busca CEP com axios</h1>
<form id="form-cep" action="#" onsubmit="searchCep()" class="form form-inline">
<input type="text" name="cep" id="cep" placeholder="Informe o cep" class="form-control">
<button type="submit" class="btn btn-info">Buscar</button>
</form>
<div id="error" style="display: none;" class="alert alert-danger"></div>
<div id="preloader" style="display: none;" class="alert alert-info">
Carregando...
</div>
<div id="results" style="display: none;"></div>
</div><!--Container-->
O código final deste projeto está neste GitHub: https://github.com/carlosfgti/ajax-with-axios
Espero que tenha gostado. Obrigado pela leitura! 🙂
Qualquer sugestão de conteúdo, só comentar.
Abraços []’s
Certamente quando estava desenvolvendo uma aplicação web em algum momento precisou fazer requisições assíncronas, ou seja, sem precisar recarregar (reload) toda a página.
Embora seja possível utilizar os próprios recursos nativos do JavaScript para fazer operações assíncronas (AJAX), existem implementações/libs que facilitam o nosso trabalho, porque tem uma abstração muito mais simples e fácil de aplicar.
Por muitos anos o jQuery reinou nas aplicações web, mas, depois da popularização de poderosos frameworks JavaScript como Angular, React, Vue JS e etc, a lib do jQuery perdeu e vem perdendo muito espaço.
Era muito comum usar os recursos de Ajax que a lib do jQuery oferecia, e sendo bastante sincero, a questão de Ajax do jQuery é muito boa, porque tem uma implementação muito simples. Mas, existem também outras opções mais diretas para resolver isso, e neste termo temos o AXIOS, que é uma biblioteca JS muito simples e fácil de usar, com um único e exclusivo propósito de criar requisições AJAX.
Por que o axios?
Como mencionado acima, o propósito da biblioteca do axios é simplesmente fazer requisições ajax, isso significa que é uma lib muito pequena e leve. Além de ter uma implementação muito simples e enxuta.
Outra característica importante é compatibilidade com diversos Browsers diferentes.
Como usar o AXIOS?
Primeiro passo é instalar a lib do axios no projeto que irá precisar trabalhar com AJAX. E existem algumas formas de fazer isso, uma delas é usar algum gerenciador de dependências para baixar, outra é simplesmente incluir a CDN online da lib no projeto.
Baixar o axios com o npm:
npm install axios
Baixar o axios com yarn:
yarn install axios
Baixar o axios com bower:
bower install axios
Usar CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Qualquer uma das opções acima é valida. Se tiver trabalhar com algum framework JavaScript, neste caso é recomendado baixar a lib para o projeto, basta usar o seu gerenciador de dependências e baixar, o mais comum é o npm.
Uma vez que incluiu a biblioteca no projeto, agora nos resta desfrutar dos recursos e fazer nossas requisições de forma assíncrona.
Sintaxe do axios:
O axios tem como característica principal ser muito simples, e por isso está crescendo muito em popularidade. Veja um exemplo simples:
axios.get('url', {})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
Basicamente usa o recurso “axios”, o verbo http da requisição (get, post, put, patch, delete, options, head), e usa o método then() para recuperar o promise, que é retorno em caso de sucesso, e o método catch() que é o retorno de uma exception.
O método get() espera 2 parâmetros, o primeiro é a URL que será feita a requisição AJAX, e segundo é opcional, que são os dados (parâmetros) que serão enviados.
Outra implementação possível para fazer requisições AJAX com o axios é assim:
axios({
method: 'post', // verbo http
url: 'http://url-api.com/api/v1/recurso', // url
data: {
name: 'Carlos', // Parâmetro 1 enviado
company: 'EspecializaTi' // Parâmetro 2 enviado
}
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
Confesso que a primeira implementação me seduz mais, porque para mim é mais simples e organizada.
Vamos criar uma aplicação prática, com axios?
Acredito que a melhor forma de exemplificar algo é através da prática, para isso vamos criar uma pequena aplicação, que vai buscar dados em uma outra aplicação, neste caso vamos usar o Postmon, que oferece um serviço simples para consulta de CEP.
A API do Postmon é muito simples, basta enviar um requisição GET para a API informando com o cep, ele responde com as informações do endereço:
http://api.postmon.com.br/v1/cep/*cep_a_consultar*
Esse é um projeto muito bem avaliado, e foi desenvolvido com Python, veja o GitHub.
Nessa aplicação vamos criar algo bem simples, que será uma implementação toda com JavaScript puro mais o axios para fazer requisições ajax.
Vamos ao passo a passo, primeiro, vamos criar o formulário que vai receber a entrada do CEP pelo usuário:
<form id="form-cep" onsubmit="searchCep()" method="POST">
<input type="text" name="cep" id="cep" placeholder="Informe o cep">
<button type="submit">Buscar</button>
</form>
O formulário tem apenas um campo para entrada do CEP, já deixe a opção onsubmit=”searchCep()” para quando submeter o formulário direcionar para a função searchCep().
Agora o próximo passo é criar a função searchCep() para receber o submit do formulário e fazer as demais operações:
function searchCep () {
alert ('submeteu')
event.preventDefault()
}
Por enquanto deixe apenas um alert() para identificar se entrou na função, e um event.preventDefault() para não deixar o evento padrão (submit) continuar.
Agora o próximo passo é recuperar o valor do campo de cep, note que este campo (input) tem um id=”cep”, vamos recuperar o value a partir do id desta tag e armazenar em uma variável chama cep, assim:
let cep = document.getElementById('cep').value
Agora vamos adicionar a lib do axios, para iniciar a busca do CEP via AJAX:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Agora basta usar o axios para consultar a API, passando dinamicamente o CEP informado pelo usuário e tratar os retornos, precisamos passar o cep na URL da API dinamicamente, para isso podemos concatenar:
`http://api.postmon.com.br/v1/cep/${cep}`
Agora que já temos a URL pronta basta consultar e analisar os logs do retorno, para ver se o promise retorna no then() com sucesso, ou se dá erro e retorna no catch():
axios.get(`http://api.postmon.com.br/v1/cep/${cep}`)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
Para analisar os retornos abre o console do navegador (tecla: F12) e vá na guia Console.
Para analisar o retorno e ver as informações, basta pegar os dados de response.data, veja como debugar:
.then(response => {
alert(response.data.bairro)
alert(response.data.cidade)
alert(response.data.estado)
alert(response.data.logradouro)
})
Próximo passo é exibir os resultados para o usuário, para isso crie uma div oculta para receber o retorno da API:
<div id="results" style="display: none;"></div>
Agora podemos criar um método que vai exibir a div id=”results” e mostrar os resultados do retorno.
Crie uma function que recebe os dados do endereço e exibe o retorno, veja como fica essa função:
function showResults (address) {
// Mostra a div com o resultado
document.getElementById('results').style.display = "block"
// Mostra os resultados:
document.getElementById('results').innerHTML = `
<p><b>Bairro: </b> ${address.bairro} </p>
<p><b>Cidade: </b> ${address.cidade} </p>
<p><b>Logradouro: </b> ${address.logradouro} </p>
<p><b>Cep: </b> ${address.cep} </p>
`
}
E no método then() chame essa função passando o retorno da API:
.then(response => {
showResults (response.data)
})
Preloader com axios:
Podemos também facilmente criar um preloader, com um informativo para o usuário ter ideia que está buscando as informações. Para fazer isso crie uma div com o conteúdo do preloader, ou seja, da mensagem, pode ser um texto, um gif, ou o que quiser:
<div id="preloader" style="display: none;">
Carregando...
</div>
Por default (padrão) essa div deve estar oculta, quando iniciar a busca pode exibi-la.
Para ocultar ou exibir essa div, vamos criar funções para fazer isso:
function startPreloader () {
// Exibe a div de preloader
document.getElementById('preloader').style.display = 'block'
}
function endPreloader () {
// Oculta a div de preloader
document.getElementById('preloader').style.display = 'none'
}
Agora na função searchCep() faça a chamada da função startPreloader(), para mostrar a mensagem de loading para o usuário:
function searchCep () {
startPreloader ()
...
}
O axios além dos métodos then() e catch() oferece o método finally() que pode ser usado para finalizar o preloader, o método finally() sempre que a consulta é finalizada é chamado, independente se der certo ou não.
No método finally() chame a função endPreloader() para finalizar o preloader, ou seja, ocultar a div de preloader:
.finally(() => endPreloader ())
No método startPreloader() é interessante limpar os dados da última busca, porque se buscar o CEP uma vez e buscar novamente é interessante limpar os dados antigos para evitar “sobras” da outra consulta.
function startPreloader () {
// Exibe a div de preloader
document.getElementById('preloader').style.display = 'block'
// Limpa os dados do resultado:
document.getElementById('results').innerHTML = ''
// Oculta a div com o resultado
document.getElementById('results').style.display = 'none'
}
Tratamento de erros com o axios:
No método catch() temos o retorno dos eventuais erros que possam acontecer, que pode ser desde um cep não encontrado, até um erro de retorno, um tempo de resposta muito demorado e etc.
É possível analisar os erros pelo log de retorno, através do response do catch(), assim:
.catch(error => {
console.log(error)
})
Na variável error temos as informações do erro, desde o status (error.status) até outras informações da API, que ela retorna.
Neste método podemos exibir um erro customizado para o usuário, ou explorar o retorno e exibir os erro de acordo com o retorno, neste caso vamos simplesmente exibir uma mensagem de erro para o usuário.
Crie uma div que vai receber as mensagens de erro:
<div id="error" style="display: none;"></div>
Agora no método catch() vamos exibir uma mensagem de erro:
.catch(error => {
// console.log(error)
// Mostra a div com o erro
document.getElementById('error').style.display = 'block'
// Mostra a mensagem
document.getElementById('error').innerHTML = 'Erro inesperado'
})
É interessante também no método startPreloader() ocultar novamente a div id=”error”
document.getElementById('error').style.display = 'none'
Resultado final do busca CEP com axios:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function searchCep () {
// Inicia o preloader
startPreloader ()
// Recupera o value do input cep
let cep = document.getElementById('cep').value
// Inicia requisição AJAX com o axios
axios.get(`http://api.postmon.com.br/v1/cep/${cep}`)
.then(response => {
showResults (response.data)
})
.catch(error => {
// console.log(error)
// Mostra a div com o erro
document.getElementById('error').style.display = 'block'
// Mostra a mensagem
document.getElementById('error').innerHTML = 'Erro inesperado'
})
.finally(() => endPreloader ())
event.preventDefault()
}
function showResults (address) {
// Mostra a div com o resultado
document.getElementById('results').style.display = 'block'
// Mostra os resultados:
document.getElementById('results').innerHTML = `
<p><b>Bairro: </b> ${address.bairro} </p>
<p><b>Cidade: </b> ${address.cidade} </p>
<p><b>Logradouro: </b> ${address.logradouro} </p>
<p><b>Cep: </b> ${address.cep} </p>
`
}
function startPreloader () {
// Exibe a div de preloader
document.getElementById('preloader').style.display = 'block'
// Limpa os dados do resultado:
document.getElementById('results').innerHTML = ''
// Oculta a div com o resultado
document.getElementById('results').style.display = 'none'
// Oculta a div com o erro
document.getElementById('error').style.display = 'none'
}
function endPreloader () {
// Oculta a div de preloader
document.getElementById('preloader').style.display = 'none'
}
</script>
Se quiser adicionar o bootstrap css para formatar o projeto, e deixar com uma aparência visual melhor é uma boa ideia.
No head adicione:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
O conteúdo final fica assim, com as classes do Bootstrap:
<div class="container">
<h1>Busca CEP com axios</h1>
<form id="form-cep" action="#" onsubmit="searchCep()" class="form form-inline">
<input type="text" name="cep" id="cep" placeholder="Informe o cep" class="form-control">
<button type="submit" class="btn btn-info">Buscar</button>
</form>
<div id="error" style="display: none;" class="alert alert-danger"></div>
<div id="preloader" style="display: none;" class="alert alert-info">
Carregando...
</div>
<div id="results" style="display: none;"></div>
</div><!--Container-->
O código final deste projeto está neste GitHub: https://github.com/carlosfgti/ajax-with-axios
Espero que tenha gostado. Obrigado pela leitura! 🙂
Qualquer sugestão de conteúdo, só comentar.
Abraços []’s