Muitos aplicativos web enfrentam a necessidade de fazer interface com uma API REST em algum momento de seu desenvolvimento. Para aplicativos web baseados em React, podemos usar Axios, um cliente HTTP leve baseado no $http serviço dentro do Angular.js v1.x. Os recursos são semelhantes à Fetch API.
nativa do JavaScript. O Axios é baseado em promessas, permitindo-nos incorporar o async e await do JavaScript para um código síncrono mais legível. Ele também suporta interceptação e cancelamento de requisições. Além disso, há proteção integrada do lado do cliente contra falsificação de solicitação entre sites.
Neste guia, mostraremos como usar o Axios para acessar la popular JSON Placeholder API em um aplicativo React de demonstração. Você pode aprender mais sobre o formato JSON em JavaScript neste tutorial.
Pré-requisitos
Para concluir as etapas demonstradas neste guia, você precisará dos seguintes componentes:
- Um servidor Ubuntu configurado corretamente. Aqui estão as etapas de configuração do seu próprio servidor Ubuntu na CloudSigma.
- A versão mais recente do Node.js instalada. Confira como instalar o Node.js no Ubuntu.
- Um novo projeto React usando Create React App. Será útil primeiro seguir e executar este guia sobre como configurar um projeto React usando o Create React App.
- Compreensão básica de HTML, CSS, e JavaScript.
Passo 1: Instalar o Axios no Projeto React
O Axios está diretamente disponível como um módulo npm. Confira o Axios no npm. Tudo o que precisamos é estabelecer um projeto React e instalar o pacote Axios.
O seguinte comando npx executará o create-react-app para criar un novo projeto React. O nome do projeto será usado para criar um diretório dedicado para o projeto. Aqui, nomeamos o projeto react-axios-demo. Execute o comando:
|
1 |
npx create-react-app react-axios-demo |
Altere o diretório atual para o diretório do projeto recém-criado:
|
1 |
cd react-axios-demo/ |
Em seguida, invoque o comando npm install para instalar o Axios. Se nenhuma versão for especificada, então o npm irá baixar e instalar automaticamente a versão mais recente do Axios:
|
1 |
npm install axios |
Nosso projeto agora está pronto para usar o Axios! É hora de colocar seus recursos em ação.
Passo 2: Construir uma Requisição GET
Nesta etapa, mostraremos a criação de um novo componente que usa o Axios para enviar uma requisição GET .
Primeiro, crie um novo componente PersonList que mostrará uma lista de nomes. Crie um diretório dedicado para armazenar o componente:
|
1 |
mkdir -pv src/components |
Em seguida, crie o arquivo PersonList.js :
|
1 |
touch PersonList.js |
Abra o arquivo em um editor de texto. Estamos usando o Visual Studio Code para maior conforto e legibilidade. Insira o seguinte código JavaScript:
|
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 |
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 key={person.id}>{person.name}</li> ) } </ul> ) } } |
Here:
-
Importamos o React e o Axios para que possamos usar ambos no componente.
-
Nós nos conectamos ao hook de ciclo de vida componentDidMount e enviamos uma requisição GET.
Você pode usar axios.get(<url>) a partir de um endpoint de API para obter uma promise (que retorna um objeto de resposta). Dentro do objeto de resposta, estão os dados desejados. Em seguida, atribuímos isso ao valor de person. Também podemos coletar informações adicionais sobre a requisição, como o código de status em res.status ou mais informações de res.request.
Em seguida, precisamos adicionar o nosso componente ao arquivo principal App.js. Adicione os seguintes códigos:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
A configuração está concluída para esta etapa. Agora você pode executar o aplicativo e testá-lo usando seu navegador favorito. Inicie o servidor de desenvolvimento:
|
1 |
npm start |
Como podemos ver, a saída mostra uma lista de nomes de pessoas em ordem aleatória:
Etapa 3: Construir uma Requisição POST
Nesta seção, mostraremos o uso do Axios para realizar outro método de requisição HTTP chamado POST. Para demonstrar isso, nosso objetivo é criar um novo componente em nosso projeto React chamado PersonAdd.
Crie o arquivo PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Em seguida, abra o arquivo em um editor de texto e insira o seguinte código:
|
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 |
import React from 'react'; import axios from 'axios'; export default class PersonAdd 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> Nome da Pessoa: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Adicionar</button> </form> </div> ) } } |
Neste código, estamos pegando a entrada do usuário e enviando (POST) o conteúdo para uma API. Dentro da handleSubmit função, estamos impedindo a ação padrão do formulário e atualizando o estado para a entrada do usuário. Ao usar POST ele retorna o mesmo objeto de resposta. Podemos usar o objeto dentro de uma then chamada. Para atender à POST requisição, estamos capturando a entrada do usuário e adicionando-a junto com a POST requisição. Isso nos dá uma resposta. Estamos registrando a resposta usando console.log. Ele deve mostrar a user entrada no formulário.
Em seguida, adicione o componente ao App.js. O código completo deve ser assim:
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
Agora, é hora de testar as alterações. Inicie o servidor de desenvolvimento:
|
1 |
npm start |
Verifique a alteração no navegador da web:
Etapa 4: Construir uma Requisição DELETE
Nesta seção, demonstraremos a exclusão de itens de uma API com a ajuda do axios.delete e usando uma URL como parâmetro. Para demonstrar, crie o componente PersonRemove. Crie o arquivo PersonRemove.js no diretório src/components:
|
1 |
touch src/components/PersonRemove.js |
Depois disso, abra o arquivo em um editor de texto e adicione o seguinte código:
|
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 |
import React from 'react'; import axios from 'axios'; export default class PersonRemove 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> ID da Pessoa: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Excluir</button> </form> </div> ) } } |
Aqui, o res objeto está oferecendo as informações sobre a requisição. Podemos então usar console.log após o formulário ser enviado.
Em seguida, implemente o componente no App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; import PersonRemove from './components/PersonRemove'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> <PersonRemove/> </div> ) } |
Hora de testar nosso código novamente. Inicie o servidor:
|
1 |
npm start |
Você deve encontrar um novo formulário que recebe o nome do usuário e o remove da lista:
Passo 5: Aplicar a Instância Base no Axios
Agora, vamos trabalhar com a instância base do Axios. Aqui, podemos definir uma URL e outros elementos de configuração. Para implementá-la, crie um arquivo separado api.js:
|
1 |
touch src/api.js |
Abra-o em um editor de texto e insira o seguinte código:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Assim que estiver configurado, podemos usá-lo dentro do componente PersonRemove . Veja como o código ficaria:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); API.delete(`users/${this.state.id}`) .then(res => { console.log(res); console.log(res.data); }) } } |
Aqui, http://jsonplaceholder.typicode.com/ está definido como a URL base. Agora, não precisamos mais usar a URL completa toda vez que acessamos um endpoint da API.
Passo 6: Implementar async e await
Nesta seção, veremos como implementar async e await para trabalhar com promises. A palavra-chave await resolve a promise e retorna o valor. Podemos atribuir este valor a uma variável para um uso mais confortável.
Veja como o código atualizado do PersonRemove.js ficaria:
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import API from '../api'; export default class PersonRemove extends React.Component { handleSubmit = event => { event.preventDefault(); const response = await API.delete(`users/${this.state.id}`); console.log(response); console.log(response.data); } } |
Aqui, nós substituímos .then(). Assim que a promise for resolvida, armazenamos o valor na variável response.
Considerações Finais
Neste tutorial, exploramos vários exemplos de uso do Axios para trabalhar com a API REST. Os códigos mostram a criação de requisições HTTP e o tratamento de respostas.
Interessado em aprender mais sobre JavaScript? Confira nossos outros guias para iniciantes sobre vários conceitos e recursos do JavaScript, por exemplo, data e hora, manipulação de strings, classes, e objetos.
Feliz Computação!
Comentários
Nenhum comentário ainda. Seja o primeiro.