Consumindo uma API com Vue.js e Axios

Quando estamos desenvolvendo um projeto web, h� grandes possibilidades de precisarmos consumir uma API, seja para consultar, apresentar ou para persistir os dados em algum banco de dados. Uma das maneiras mais f�ceis de se fazer isso � usando o Axios.

Axios � uma biblioteca JavaScript, um cliente HTTP utilizado para fazer requisiç�es. � um projeto open source que est� dispon�vel no GitHub e � amplamente utilizado pela comunidade de desenvolvedores tanto web quanto mobile.

Quando vamos desenvolver um projeto, � muito comum precisarmos comunicar nosso projeto com uma API externa atrav�s do protocolo HTTP, uma das formas mais comuns de se fazer isso � utilizando a API Fetch.

Assim como o Fetch, o Axios � baseado em Promises, por�m ele fornece um conjunto de funcionalidades poderosas e flex�veis.

Veja algumas vantagens de utilizar o Axios:

Suporte para navegadores mais antigos;
Tratamento simples de erros;
Interceptaç�o de respostas;
Suporte a Promises;
Convers�o autom�tica de dados em JSON.

Instalaç�o e Configuraç�o

Primeiramente precisamos instalar o Axios em nosso projeto para podermos utilizar seus recursos. Para isso voc� pode utilizar o npm executando o C�digo 1.

npm install axios

C�digo 1. Comando para instalar o Axios utilizando o npm

Ou se preferir pode utilizar o Yarn executando o C�digo 2.

yarn add axios

C�digo 2. Comando para instalar o Axios utilizando o Yarn

Ap�s a instalaç�o do Axios � s� import�-lo no seu componente conforme o C�digo 3.

import axios from "axios";

C�digo 3. Importando o Axios

Ap�s a importaç�o do Axios veremos de forma simples como us�-lo para fazer requisiç�es, conforme o exemplo do C�digo 4.

axios
  .get("http://localhost:8000/api/users")
  .then((res) => {
          console.log(res.data)
  })
  .catch((error) => {
          console.log(error);
  });

C�digo 4. Exemplo de uso do Axios para fazer uma requisiç�o

Com o Axios importado em nosso componente, podemos utiliz�-lo para fazer alguma requisiç�o. Nesse caso, fizemos uma requisiç�o do tipo get utilizando o m�todo axios.get e passamos para ele entre par�nteses a URL que queremos fazer a requisiç�o axios.get(�url�).

Como o Axios trabalha com Promisses, implementamos dois m�todos para captur�-las: then em caso de sucesso e o catch caso gere um erro. Os dois m�todos recebem uma callback passando um par�metro que ser� a resposta da API. Apenas um dos dois m�todos ser� chamado, ou seja, then se tiver sucesso ou catch se gerar erro.

Veja na Figura 1 um exemplo de sucesso, ou seja, de execuç�o do then no c�digo acima que imprime no terminal a resposta no formato JSON.

Figura 1. Exemplo de retorno de uma requisiç�o no formato JSON

Al�m de requisiç�es utilizando o verbo HTTP GET, o Axios tamb�m faz as requisiç�es utilizando outros, como pode ser visto abaixo:

Verbo GET: axios.get(url)
Verbo POST: axios.post(url, dados)
Verbo DELETE: axios.delete(url)
Verbo PUT: axios.put(url, dados)
Verbo Patch: axios.patch(url)

Verbos HTTP n�o s�o conte�do deste artigo. Caso queira se aprofundar nos verbos HTTP, sugerimos consumir o artigo HTTP: Verbos (devmedia.com.br).

Exemplo de axios.get() em um componente

Ap�s a instalaç�o do Axios, vamos ver de forma simples como us�-lo para fazer uma requisiç�o utilizando a API do GitHub como exemplo. Para isso utilizaremos o m�todo get do Axios. Em nosso componente vamos mostrar o avatar e o nome do perfil que o GitHub vai retornar, como pode ser visto na Figura 2.

Figura 2. Avatar e nome do usu�rio retornado do GitHub sendo exibido na tela

Veja no C�digo 5 o componente que exibe o avatar e o nome do usu�rio retornados da API do GitHub.

<template>
   <div class="user">
     <div>User Component</div>
     <div class="image">
       <img :src="user.avatar_url" />
     </div>
     <div class="name">
       {{ user.login }}
     </div>
   </div>
  </template>
  <script>
  import axios from "axios";
   
  export default {
   name: "User",
   data() {
     return {
       user: {},
     };
   },
   created() {
     this.getUser();
   },
   methods: {
     getUser() {
       axios
         .get("https://api.github.com/users/luizmedeiros00")
         .then((res) => {
           this.user = res.data;
         })
         .catch((error) => {
           console.log(error);
         });
     },
   },
  };
  </script>

C�digo 5. C�digo do componente que exibe o avatar do usu�rio vindo do GitHub

Veja em detalhes a parte do c�digo referente ao Axios:

Linha 13: Importamos o Axios para o nosso componente.
Linha 26: Criamos o m�todo getUser que executar� a requisiç�o com a API.
Linha 27: Dentro do m�todo getUser, chamados o Axios que foi importado na linha 13.
Linha 28: Passamos a URL da API para o m�todo get.
Linha 30: Capturamos a resposta da API e inserimos na propriedade user para mostrar no HTML.
Linha 33: capturamos eventuais erros da API e mostramos no console.

Nosso c�digo vai retornar uma resposta, por isso receberemos o JSON que pode ser visto na Figura 3.

Figura 3. JSON retornado pela API do GitHub

Exemplos de requisiç�es com axios.get()

Agora vamos avançar um pouco com o Axios, vamos criar um arquivo chamado api.js para inicializar o objeto do Axios, com isso, podemos inserir algumas configuraç�es nele, como por exemplo definir uma URL base para que ele acesse em todas as requisiç�es. Para utilizar este objeto Axios em outros arquivos vamos export�-lo. Veja o c�digo do arquivo api.js no C�digo 6.

  import axios from "axios"; 

  const api = axios.create({
   baseURL: "http://localhost:8000/api",
  });
   
  export default api

C�digo 6. C�digo do arquivo api.js

Entenda a seguir o c�digo criado:

Linha 1: importamos o Axios.
Linha 3: criamos um objeto que recebe uma inst�ncia e dentro do m�todo create passamos um objeto com as nossas configuraç�es.
Linha 4: passamos a baseUrl que ser� utilizada pela inst�ncia.
Linha 7: exportados o nosso objeto, para ser importados e usado nos componentes.

Agora ao inv�s de importarmos o Axios diretamente em nossos componentes, podemos simplesmente importar o arquivo api.js que acabamos de criar. Veja no C�digo 7 como importar este arquivo no seu componente.

<template>
 <div class="user">
     <div>User Component</div>
     <ul>
       <li v-for="user in users" :key="user.name">
         {{ user.name }}
       </li>
     </ul>
   </div>
</template>
<script>
  import api from "../api";
   
  export default {
   name: "User",
   data() {
     return {
       users: {},
     };
   },
   created() {
     this.getUser();
   },
   methods: {
     getUser() {
       api
         .get("/users")
         .then((res) => {
           this.users = res.data;
         })
         .catch((error) => {
           console.log(error);
         });
     },
   },
  };
</script>

C�digo 7. Componente que importa o Axios

No exemplo acima usamos o get para buscar os usu�rios em uma API. Veja que na linha 26, usamos o nosso objeto api com a inst�ncia do Axios e agora definimos apenas o final da URL, sem precisar escrever novamente a URL base. Dessa forma a URL que o Axios vai fazer a requisiç�o ser� a definida no arquivo api.js junto com a que passamos para o get, ou seja, http://localhost:8000/api/users.

Veja alguns exemplos de m�todos que usam o objeto api criado no arquivo api.js.

No C�digo 8 vemos um exemplo utilizando o post para cadastrar um usu�rio.

postUser() {     
  api
    .post("/user", {name: 'Jo�o', profissao: 'Desenvolvedor Backend'})
    .then(() => {
         console.log('Usu�rio cadastrado com sucesso')
    })
    .catch((error) => {
         console.log(error);
    });
  },

C�digo 8. Exemplo de requisiç�o com axios.post

Repare que novamente n�o escrevemos a URL completa mas apenas o final, ou seja, '/user' e como segundo par�metro passamos os que queremos cadastrar, nesse caso name e profissao.

No C�digo 9 veja um exemplo utilizando o update para atualizar um usu�rio.

updateUser(id) {
  api
    .put(`/user/$`, {name: 'Luiz', profissao: 'Desenvolvedor Frontend'})
      .then(() => {
          console.log('Usu�rio atualizado com sucesso')
      })
      .catch((error) => {
          console.log(error);
      });
},

C�digo 9. Exemplo de requisiç�o com axios.update

Repare que concatenamos o id do usu�rio que queremos atualizar com a URL e no segundo par�metro passamos os dados que queremos atualizar.

Tanto em post quanto em put passamos um segundo par�metro que � um objeto com as informaç�es que queremos enviar para a API.

Veja no C�digo 10 um exemplo utilizando o m�todo delete para remover um usu�rio cadastrado.

deleteUser(id) {
  api
    .delete(`/user/$`)
      .then(() => {
           console.log('Usu�rio deletado com sucesso')
      })
      .catch((error) => {
           console.log(error);
      });
}

C�digo 10. Exemplo de requisiç�o com axios.delete

Neste exemplo, concatenamos a URL com o id do usu�rio que queremos deletar, nesse m�todo n�o precisamos passar nenhum dado como segundo par�metro.

Interceptors

Em alguns casos temos que acessar rotas autenticadas, e isso requer passar um token de autorizaç�o nos headers das requisiç�es, para isso, usamos o m�todo interceptors. Isso � feito no arquivo que criamos para guardar as configuraç�es do Axios, no nosso caso o arquivo api.js.

Ap�s a inicializaç�o do objeto axios, podemos usar o seu m�todo chamado Interceptors.request.use, passando as configuraç�es que queremos. No nosso caso, setaremos um token de autorizaç�o nos headers das requisiç�es. Dessa forma todas as nossas requisiç�es ir�o com esse header configurado, ou seja, enviando o token para a API, como vemos no exemplo do C�digo 11.

  import axios from "axios"; 
  const api = axios.create({
   baseURL: "http://localhost:8000/api/",
  });
   
  api.interceptors.request.use(
   (config) => {
     config.headers.Authorization = `Bearer $`;
   
     return config;
   },
   (error) => {
     return Promise.reject(error);
   }
  );
   
  export default api;

C�digo 11. Configurando um interceptor

Linha 7: adicionamos o interceptors.request.use que recebe duas callback como par�metro, a primeira ser� executada antes de qualquer requisiç�o e a segunda captura os erros das requisiç�es.
Linha 9: adicionamos o nosso token que ser� setado antes das nossas requisiç�es.
Linha 11: retornamos o objeto config.
Linha 14: retornamos qualquer erro que o nosso interceptors capture.

Conclus�o

� muito f�cil trabalhar com Axios no Vue.js, devido a f�cil integraç�o entre essas duas ferramentas, o Axios acaba sendo uma escolha muito comum para se trabalhar nos projetos Vue que precisam de integraç�es com API.

Confira tamb�m

O que � Vue.js?

Curso

Sua primeira aplicaç�o