Introdução
Muitos projetos na internet precisam interagir com uma API REST em algum ponto em seu desenvolvimento. O Axios é um cliente HTTP leve baseado no serviço $http
dentro do Angular.js v1.x e é semelhante à API Fetch nativa do JavaScript.
O Axios é baseado em promessas, o que oferece a capacidade de aproveitar o async
e await
do JavaScript para um código assíncrono mais legível.
Também é possível interceptar e cancelar solicitações, e existe uma proteção integrada do lado do cliente contra a falsificação de solicitações entre sites.
Neste artigo, você irá explorar exemplos de como usar o Axios para acessar a famosa API JSON Placeholder dentro de um aplicativo React.
Pré-requisitos
Para acompanhar este artigo, será necessário o seguinte:
Passo 1 — Adicionando o Axios ao projeto
Neste seção, você irá adicionar o Axios ao projeto React digital-ocean-tutorial
que você criou seguindo o tutorial Como configurar um projeto do React com o Create React App.
Para adicionar o Axios ao projeto, abra seu terminal e mude os diretórios nele:
- cd digital-ocean-tutorial
Em seguida, execute este comando para instalar o Axios:
Depois disso, será necessário importar o Axios para dentro do arquivo no qual você deseja usá-lo.
Passo 2 — Criando uma solicitação GET
Neste exemplo, um novo componente será criado e o Axios será importado nele para enviar uma solicitação GET
.
Dentro da pasta src
do seu projeto React, crie um novo componente chamado PersonList.js
:
Adicione o código a seguir ao componente:
digital-ocean-tutorial/src/PersonList.js
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
)
}
}
Primeiro, você importa o React e o Axios para que ambos possam ser usados no componente. Em seguida, entra no gancho de ciclo de vida componentDidMount
e executa uma solicitação GET
.
Você usa o axios.get(url)
com uma URL de um ponto de extremidade da API para obter uma promessa que retorna um objeto de resposta. Dentro do objeto de resposta, há dados aos quais é atribuído o valor de person
.
Além disso, é possível obter outras informações sobre a solicitação, como o código de status em res.status
ou mais informações dentro de res.request
.
Passo 3 — Criando uma solicitação POST
Neste passo, você usará o Axios com outro método de solicitação HTTP chamado POST
.
Remova o código anterior em PersonList
e adicione o seguinte para criar um formulário que permite a entrada do usuário e posteriormente POST
s (posta) o conteúdo em uma API:
digital-ocean-tutorial/src/PersonList.js
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
name: '',
}
handleChange = event => {
this.setState({ name: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
const user = {
name: this.state.name
};
axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person Name:
<input type="text" name="name" onChange={this.handleChange} />
</label>
<button type="submit">Add</button>
</form>
</div>
)
}
}
Dentro da função handleSubmit
, você impede a ação padrão do formulário. Em seguida, atualiza o state
para a entrada do user
.
Usar o POST
gera o mesmo objeto de resposta com informações que podem ser usadas dentro de uma chamada then
.
Para completar a solicitação POST
, você primeiramente captura a entrada do user
. Em seguida, adiciona a entrada juntamente com a solicitação POST
, o que lhe dará uma resposta. Depois disso, você pode aplicar o console.log
na resposta, o que mostra a entrada do user
no formulário.
Passo 4 — Criando uma solicitação DELETE
Neste exemplo, você verá como excluir itens de uma API usando o axios.delete
e passando uma URL como um parâmetro.
Altere o código do formulário do exemplo do POST
para excluir um usuário ao invés de adicionar um novo:
digital-ocean-tutorial/src/PersonList.js
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
id: '',
}
handleChange = event => {
this.setState({ id: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person ID:
<input type="text" name="id" onChange={this.handleChange} />
</label>
<button type="submit">Delete</button>
</form>
</div>
)
}
}
Novamente, o objeto res
fornece informações sobre a solicitação. Em seguida, você pode usar novamente o console.log
nessas informações após o formulário ser enviado.
Passo 5 — Usando uma instância base no Axios
Neste exemplo, você verá como configurar uma instância base na qual é possível definir uma URL, além de qualquer outro elemento de configuração.
Crie um arquivo separado chamado api.js
:
Exporte uma nova instância axios
com esses valores padrão:
digital-ocean-tutorial/src/api.js
import axios from 'axios';
export default axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`
});
Assim que a instância padrão for configurada, ela pode então ser usada dentro do componente PersonList
. Importe uma nova instância desta forma:
digital-ocean-tutorial/src/PersonList.js
import React from 'react';
import axios from 'axios';
import API from '../api';
export default class PersonList extends React.Component {
handleSubmit = event => {
event.preventDefault();
API.delete(`users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
}
Como http://jsonplaceholder.typicode.com/
é agora a URL base, não é mais necessário escrever toda a URL sempre que quiser acessar um ponto de extremidade diferente na API.
Passo 6 — Usando o async
e await
Neste exemplo, você verá como usar o async
e await
para trabalhar com promessas.
A palavra-chave await
resolve a promise
e retorna o value
. Depois disso, o value
pode ser atribuído a uma variável.
handleSubmit = async event => {
event.preventDefault();
//
const response = await API.delete(`users/${this.state.id}`);
console.log(response);
console.log(response.data);
};
Nesse exemplo de código, o .then()
foi substituído. A promessa
é resolvida, e o valor é armazenado dentro da variável response
.
Conclusão
Neste tutorial, você explorou diversos exemplos sobre como usar o Axios dentro de um aplicativo React para criar solicitações HTTP e processar as repostas.
Se quiser aprender mais sobre o React, confira a série Como programar no React.js, ou veja a página de tópico do React para mais exercícios e projetos de programação.