HTTP Request Axios VueJs

Neste rápido tutorial vamos configurar um projeto VueJS para utilizar axios para realizar HTTP Request.

Criando um novo projeto

Para criar o projeto VueJS iremos utilizar o Vue CLI.

npm install -g vue-cli

vue create vue-axios-http

Instalando Axios

Para instalar o axios basta rodar o seguinte comando

npm install --save axios

Configurando e utilizando o Axios

O arquivo de configuração como exemplo pode ser visto abaixo, mas ao final do post temos o link para o github do projeto.

import axios from 'axios'

const httpDefaults = {
    timeout: 15000,
    withCredentials: false,
};

const callBackRejectConnections = (error) => {
    console.log(error);
    console.log("Call back para requisições rejeitadas pelo servidor.")
    return Promise.reject(error);
}

const httpBusiness = axios.create(httpDefaults);

httpBusiness.interceptors.request.use(config => {
    console.log("Interceptador para requisições");
    return config
});

httpBusiness.interceptors.response.use(response => {
    console.log("Interceptador para respostas");
    return response.data;
}, callBackRejectConnections);

export default httpBusiness;

Configurando o arquivo arquivo responsável por concentrar as regras de requisição utilizando o client do axios que configuramos anteriormente:

import Http from "@/Http";

const URL_API_ESTADOS = "https://servicodados.ibge.gov.br/api/v1/localidades/estados";

export default {

    async getEstados(){
        return Http.get(URL_API_ESTADOS);
    }

}

Exemplo listando estados:

Como mencionado anteriormente, é uma configuração bem simples.

Separo aqui o link do Github com o projeto completo.

https://github.com/aluizrech/vue-axios-http