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.