// Tutorial //

Como usar o Axios com o React

Published on November 12, 2020
Default avatar
By PaulHalliday
Developer and author at DigitalOcean.
Português
Como usar o Axios com o React

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:

  1. cd digital-ocean-tutorial

Em seguida, execute este comando para instalar o Axios:

  1. npm install 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:

  1. nano src/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 POSTs (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:

  1. nano src/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.

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!