Consumindo APIs com o Axios – 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 usar

Para utilizá-lo, é necessário importar para o projeto, seja globalmente, ou somente no arquivo que irá realizar requisições, para importar faça:

import axios from 'axios'

Para este artigo, irei mostrar somente como realizar a busca de dados de uma API utilizando Axios, vou mostrar como buscar dados de um determinado CEP. Para buscar dados utilizaremos o método GET, da seguinte forma:

axios({
    method: 'get',
    url: 'viacep.com.br/ws/01001000/json/'
})
.then(response => {
    console.log(response)
})
.catch(error => {
    console.log(error)
})

E com isso teremos a seguinte resposta:

{
      "cep": "01001-000",
      "logradouro": "Praça da Sé",
      "complemento": "lado ímpar",
      "bairro": "Sé",
      "localidade": "São Paulo",
      "uf": "SP",
      "unidade": "",
      "ibge": "3550308",
      "gia": "1004"
    }

A resposta da requisição solicitada, ficará dentro do then, e terá os dados de retorno da API, com isso você pode manipular esses dados da maneira que desejar, colocando em variáveis e disponibilizando esses dados na tela de maneira mais organizada para o usuário.

Caso ocorra algum erro no processo de busca dos dados, esse erro será processado dentro do catch, é importante sempre manter esse bloco para caso você tenha qualquer erro, é possível debugar nessa função para saber qual erro está sendo retornado, e assim facilitar a resolução do problema.

Por hoje é isso, em breve postarei mais formas de realizar requisições com o axios, explicar mais a fundo algumas funcionalidades e mostrar em um projeto como realizar as operações de CRUD com o Axios.