Blog EspecializaTi
Carlos Ferreira Por: Carlos Ferreira Comentar

Como Fazer Requisições AJAX com o AXIOS

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

 

Carlos Ferreira

Sobre o Autor:

Carlos Ferreira

Carlos Ferreira é Analista de Sistemas Experiente, Empreendedor, Fundador da empresa EspecializaTi. Certificações: Comptia Linux +, LPI, Novell Certification.

Todos os direitos reservados © 2018 - EspecializaTi. É proibida a reprodução total ou parcial deste conteúdo.