One place for hosting & domains

      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:

      • 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 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:

      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.



      Source link


      Leave a Comment