Axios é uma biblioteca JavaScript popular usada para fazer requisições HTTP. É um cliente HTTP baseado em promises usado em JavaScript ou com outras bibliotecas JavaScript como Vue.js ou React.js. Devido à sua isomórfica natureza, o Axios pode ser executado no lado do cliente e do servidor simultaneamente usando a mesma base de código. Além disso, é uma ferramenta poderosa usada coletivamente com async para formular uma API amigável ao usuário. Acima de tudo, o Axios tem a capacidade de abortar uma requisição automaticamente, o que, de outra forma, seria um desafio árduo.
Como o Axios funciona?
O Axios usa as configurações padrão de promise para rodar em paralelo no navegador e no Node.js com o mesmo código. Usando o recurso HTTP baseado em promises, o Axios realiza CRUD operações e envia requisições HTTP para REST endpoints. Neste tutorial, nós vamos guiar você pelos passos de configuração de uma API REST com Axios no Vue.js.
Vamos começar!
Pré-requisitos
Para conseguir concluir este tutorial, você deve ter o seguinte:
- Node.js instalado e configurado no seu sistema Ubuntu.
- Se você estiver usando o Centos OS, pode seguir este guia para instalar o Node.js no Centos 8.
- Conceitos básicos de JavaScript.
Passo 1: Instalação do Axios
Antes de instalar o Axios, é importante atualizar os repositórios do seu sistema para evitar erros ou falhas na instalação:
|
1 |
sudo apt-get update |
Em seguida, instale o Axios usando o pacote de software npm :
|
1 |
npm install axios --save |
Alternativamente, você pode instalar o Axios usando o gerenciador de pacotes yarn :
|
1 |
yarn add axios |
Depois disso, crie um projeto Vue.js e importe o Axios nele:
|
1 |
import axios from ‘axios’; |
No próximo passo, usaremos o método axios.get() para obter requisições.
Passo 2: Buscar dados usando requisição GET
Aqui, vamos buscar dados usando uma requisição GET . Veja como usamos o método axios.get() para buscar dados diretamente de um método:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // Busca posts quando o componente é criado. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // Respostas JSON são analisadas automaticamente. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Você verá a versão async ou await :
O código acima irá recuperar posts de JSONPlaceholder e distribuir os dados de forma não ordenada. Qualquer tipo de erro encontrado apareceria em uma lista não ordenada diferente.
Passo 3: Enviar dados usando requisição POST
Ao contrário do axios.get() método, agora usaremos o axios.post() método para fazer uma POST requisição. Dê uma olhada em como aplicar o axios.post() método para obter dados:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // Envia posts para o servidor quando chamado. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Você verá a versão async ou await :
O código acima criará um campo de entrada que envia conteúdo para JSONPlaceholder. Qualquer tipo de erro encontrado aparece em uma lista não ordenada diferente.
Passo 4: Configurar uma Instância Base Comum
Neste passo, vamos criar uma instância base comum usando o método axios.create() . O objetivo por trás da configuração de uma instância base comum é compartilhar uma URL base entre todas as instâncias.
A instância base comum é útil se todas as suas chamadas usarem um servidor ou cabeçalho comum como o cabeçalho Authorization :
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
Finalmente, você está pronto para usar HTTP no seu componente:
Com toda a configuração definida, nosso http-demo.js está estabelecido. Agora, o Axios se conecta com o JSONPlaceholder e Authorization ao mesmo tempo usando a mesma base de código. A melhor parte é que o Axios recupera os posts, identifica os erros e os exibe em uma lista não ordenada.
Conclusão
Neste tutorial, aprendemos o básico sobre enviar e receber dados usando o Axios. Além disso, criamos uma instância base comum para compartilhar uma URL comum. No entanto, este não deve ser o fim do seu aprendizado sobre o Axios. Incentivamos você a praticar outros métodos do Axios para enviar POST, PUT, PATCH e DELETE requisições. Mergulhe na documentação do Axios para explorar o assunto e tentar construir projetos por conta própria.
Para aprender mais sobre os tópicos do Axios e Vue.js, confira estes recursos do nosso blog:
- Usando o cliente HTTP Axios em uma aplicação React: Um Tutorial
- Usando Vue e Axios para exibir dados de uma API
Feliz computação!
Comentários
Nenhum comentário ainda. Seja o primeiro.