Configurar Axios globalmente no VueJS

Introdução

O Axios é um cliente HTTP que funciona tanto do lado do Cliente (browser), quanto do lado do Servidor (NodeJS), e com isso, da a possibilidade de se manipular dados vindos de uma API, e fazer as operações de CRUD.

Instalação no projeto

Para realizar a instalação, é possível utilizar tanto o NPM quanto o Yarn

npm install axios
ou
yarn install axios

Como configurar

Você pode realizar a configuração toda no arquivo main.js, mas eu prefiro deixar essa configuração em um arquivo separado, porque pode ser uma configuração extensa dependendo do projeto, e separar isso deixa o arquivo main mais organizado, até porque serão configurados muitos outros plugins dentro dele.

Para configurar de maneira organizada então, crie uma pasta no projeto a partir da src chamada configs e dentro dessa um arquivo chamado api.js, dentro desse arquivo ficará toda a configuração do axios adicione o código abaixo nesse arquivo.

import axios from 'axios'

const api = axios.create({
baseURL: 'http://localhost:3000/', //url base da sua api
timeout: 5000 //tempo máximo de espera de resposta
});

export default api

Depois disso, vá até o arquivo main.js, importe esse arquivo de configuração e configure o prototype para quando for fazer requisições http, usar essa configuração do axios, o main.js deve ficar dessa maneira:

import Vue from 'vue'
import App from './App.vue'
import api from './configs/api'

Vue.prototype.$http = api
Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

Por fim, para testar o que foi feito, você pode dentro de qualquer componente, fazer uma chamada a sua API para ver quais dados retorna, no meu caso eu tenho uma API de lista de tarefas executando na porta 3000, configurei uma request quando criar o componente HelloWorld, dessa maneira:

created(){
   //http://localhost:3000/task
   this.$http.get('task').then(tasks => {
      console.log(tasks)
   })
}

E isso me retorna a seguinte resposta:

Conclusão

Pronto, com isso agora, posso realizar chamadas em todo o sistema utilizando o axios e com uma configuração global, é possível configurar de outras formas e utilizar outros padrões, porém esta é uma boa forma de realizar uma configuração global, e reutilizar dentro do sistema sempre que quiser realizar alguma request.