Artigo original: How To Use Axios With React: The Definitive Guide (2021), escrito por Reed Barger

Traduzido e adaptado por: Daniel Rosa

Neste guia, você verá com exatidão como usar o Axios.js com React usando vários exemplos do mundo real com hooks do React.

Você verá o motivo para usar o Axios como a biblioteca de busca de dados, como configurá-lo no React e como realizar todo o tipo de solicitação HTTP com ele.

Em seguida, examinaremos recursos mais avançados, como criar uma instância do Axios para a reutilização, como usar async-await com o Axios para ter simplicidade e como usar o Axios como um hook personalizado.

Vamos lá!

Quer ter uma cópia dessas instruções?‬ 📄

Clique aqui para baixar a folha informativa em formato PDF (em inglês, leva apenas 5 segundos).

Ela inclui todas as informações essenciais que você vê aqui em um guia em PDF conveniente para você.

Conteúdo

O que é o Axios?

O Axios é uma biblioteca de client HTTP que permite a você fazer solicitações para determinado endpoint:

Screen-Shot-2021-07-12-at-1.14.41-PM

Este endpoint pode ser uma API ou seu próprio servidor Node.js de back-end, por exemplo.

Ao fazer uma solicitação, você espera que sua API realize uma operação de acordo com a solicitação que você fez.

Por exemplo, se você fizer uma solicitação GET, espera obter de volta dados para exibir em sua aplicação.

Por que usar o Axios no React

Há várias bibliotecas que você pode usar para fazer essas solicitações. Para quê escolher o Axios?

Aqui estão cinco motivos pelos quais você deve escolher o Axios como sua biblioteca de client para fazer solicitações HTTP:

  1. Ele tem bons padrões para trabalhar com dados JSON. Diferente de suas alternativas, como a Fetch API, você em geral não precisa definir seus cabeçalhos nem realizar tarefas aborrecidas como converter o corpo de sua solicitação em uma string JSON.
  2. O Axios tem nomes de função que correspondem com os métodos de HTTP. Para realizar uma solicitação GET, use o método .get().
  3. O Axios faz mais com menos código. Diferente da Fetch API, você só precisa de uma callback .then() para acessar seus dados JSON solicitados.
  4. O Axios tem um tratamento de erros melhor. O Axios lança erros na faixa dos 400 e 500 para você. É diferente da Fetch API, onde você tem de verificar o código do status e lançar o erro por sua conta.
  5. O Axios pode ser usado no servidor e no client. Se estiver escrevendo uma aplicação em Node.js, saiba que o Axios pode ser usado em um ambiente separado do navegador.

Como configurar o Axios com o React

Usar o Axios com o React é um processo bem simples. Você precisa de três coisas:

  1. Um projeto em React existente
  2. Instalar o Axios com o npm/yarn
  3. Um endpoint de API para fazer as solicitações

A maneira mais rápida de criar uma nova aplicação com o React é visitando react.new.

Se você tiver um projeto em React existente, só precisa instalar o Axios com o npm (ou qualquer outro gerenciador de pacotes):

npm install axios

Neste guia, usaremos a API JSON Placeholder para obter e alterar dados de publicações.

Aqui está uma lista de todas as rotas diferentes para as quais você pode fazer solicitações, juntamente ao método HTTP adequado para cada:

Screen-Shot-2021-07-10-at-12.21.28-PM

Aqui vemos um exemplo rápido de todas as operações que você realizará com o Axios e com seu endpoint de API — obter, criar, atualizar e excluir publicações:

axios-react

Como fazer uma solicitação GET

Para pegar ou obter dados, faça uma solicitação GET.

Primeiro, faça uma solicitação de publicações individuais. Se olhar para o endpoint, obterá a primeira publicação do endpoint /posts:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts/1";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);

  if (!post) return null;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

Para realizar essa solicitação quando o componente é montado, use o hook useEffect. Ele envolve importar o Axios, usar o método .get() para fazer uma solicitação GET para seu endpoint e usar uma callback .then() para obter de volta todos os dados da resposta.

A resposta é retornada como um objeto. Os dados (que, neste caso, são uma publicação com as propriedades id, title e body) são colocados em um state  chamado post, que é exibido no componente.

Observe que você pode sempre encontrar os dados solicitados a partir da propriedade .data da resposta.

Como fazer uma solicitação POST

Para criar dados, faça uma solicitação POST.

De acordo com a API, isso precisa ser feito no endpoint /posts. Se examinar o código abaixo, verá que há um botão para criar uma publicação:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function createPost() {
    axios
      .post(baseURL, {
        title: "Hello World!",
        body: "This is a new post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={createPost}>Create Post</button>
    </div>
  );
}

Ao clicar no botão, ele chama a função createPost.

Para fazer a solicitação POST com o Axios, use o método .post(). Como segundo argumento, inclua uma propriedade de objeto que especifica como você quer que seja sua nova publicação.

Mais uma vez, use uma callback .then() para obter os dados da resposta e substituir a primeira publicação que você obteve pela nova publicação que você solicitou.

Isso é bastante semelhante ao método .get(), mas o novo recurso que você quer criar é fornecido como o segundo argumento após o endpoint da API.

Como fazer uma solicitação PUT

Para atualizar determinado recurso, faça uma solicitação PUT.

Neste caso, você atualizará a primeira publicação.

Para fazer isso, Você cria outro botão. Desta vez, o botão chamará uma função para atualizar uma publicação:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function updatePost() {
    axios
      .put(`${baseURL}/1`, {
        title: "Hello World!",
        body: "This is an updated post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={updatePost}>Update Post</button>
    </div>
  );
}

No código acima, use o método PUT do Axios. Como ocorre com o método POST, inclua as propriedades que deseja que estejam no recurso atualizado.

Novamente, usando a callback .then(), atualize JSX com os dados retornados.

Como fazer uma solicitação DELETE

Por fim, para excluir um recurso, use o método DELETE.

Como exemplo, excluiremos a primeira publicação.

Observe que você não precisa de qualquer segundo argumento para realizar essa tarefa:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    axios
      .delete(`${baseURL}/1`)
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

Na maioria dos casos, você não precisa dos dados que são retornados do método .delete().

No código acima, contudo, a callback .then() ainda é usada para garantir que sua solicitação foi resolvida com sucesso.

No código acima, depois que uma publicação foi excluída, o usuário é alertado que ela foi excluída com sucesso. Em seguida, a publicação é removida do state configurando seu valor inicial como null.

Além disso, assim que uma publicação é excluída, o texto "No post" é mostrado imediatamente após a mensagem de alerta.

Como tratar erros com o Axios

E quanto ao tratamento de erros com o Axios?

E se houver um erro durante a realização de uma solicitação? Por exemplo, você pode passar os dados errados, fazer uma solicitação ao endpoint errado ou ter um erro de rede.

Para simular um erro, envie uma solicitação para um endpoint da API que não exista: /posts/asdf.

Essa solicitação retornará um código de status 404:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    // invalid url will trigger an 404 error
    axios.get(`${baseURL}/asdf`).then((response) => {
      setPost(response.data);
    }).catch(error => {
      setError(error);
    });
  }, []);
  
  if (error) return `Error: ${error.message}`;
  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

Neste caso, em vez de executar a callback .then(), o Axios lançará um erro e executará a função de callback .catch().

Nesta função, pegamos os dados do erro e os colocamos no state para alertar nosso usuário sobre o erro. Assim, se tivermos um erro, exibiremos uma mensagem de erro.

Ao rodar esse código, você verá o texto, "Error: Request failed with status code 404".

Como criar uma instância do Axios

Se olhar para os exemplos anteriores, verá que há um baseURL que você usa como parte do endpoint para o Axios realizar essas solicitações.

No entanto, é um pouco entediante escrever aquele baseURL para toda solicitação. Não seria possível simplesmente fazer com que o Axios se lembrasse de qual baseURL você está usando, já que sempre envolve um endpoint semelhante?

De fato, sim. Se você criar uma instância com o método .create(), o Axios se lembrará do baseURL, assim como de outros valores que você quiser especificar para cada solicitação, incluindo cabeçalhos:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    client.get("/1").then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    client
      .delete("/1")
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

A única propriedade no objeto de configuração acima é o baseURL, para o qual você passa o endpoint.

A função .create() retorna a instância recém-criada, que, neste caso, é chamada de client.

Então, no futuro, você pode usar todos os mesmos métodos que usou anteriormente, mas não precisa mais incluir o baseURL como o primeiro argumento. Você só precisa referenciar a rota específica que você deseja, por exemplo, /, /1 e assim por diante.

Como usar a sintaxe de async-await com o Axios

Um grande benefício de se usar promises em JavaScript (incluindo em aplicações React) é a sintaxe de async-await.

Async-await permitem que você escreva código muito mais limpo sem funções de callback then e catch. Além disso, o código com async-await parece muito com código síncrono, sendo mais fácil de entender.

Mas como usar a sintaxe de async-await com o Axios?

No exemplo abaixo, as publicações são obtidas e ainda há um botão para excluir aquela publicação:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    async function getPost() {
      const response = await client.get("/1");
      setPost(response.data);
    }
    getPost();
  }, []);

  async function deletePost() {
    await client.delete("/1");
    alert("Post deleted!");
    setPost(null);
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

Porém, no useEffect, há uma função async chamada getPost.

Torná-la async permite que você use a palavra-chave await para resolver a solicitação GET e definir aqueles dados no state na próxima linha sem a callback .then().

Observe que a função getPost é chamada imediatamente após ser criada.

Como adendo, a função deletePost agora é async, o que é uma obrigação para se poder usar a palavra-chave await, que resolve a promise que ela retorna (todo método do Axios retorna uma promessa a ser resolvida).

Após usar a palavra-chave await com a solicitação DELETE, o usuário é alertado de que a publicação foi excluída e a publicação é definida como null.

Como você pode ver, async-await limpa e muito o código. Você pode usar essa sintaxe com o Axios facilmente.

Como criar um hook useAxios personalizado

A sintaxe async-await é uma maneira ótima de simplificar seu código, mas você pode melhorá-lo ainda mais.

Em vez de usar o useEffect para obter os dados quando o componente é montado, você pode criar seu próprio hook personalizado com o Axios para realizar a mesma operação como uma função reutilizável.

Embora você possa fazer seu hook personalizado por conta própria, há uma biblioteca muito boa e que fornece um hook personalizado useAxios chamada use-axios-client.

Primeiro, instale o pacote:

npm install use-axios-client

Para usar o hook, importe useAxios de use-axios-client na parte superior do componente.

Como você já não precisa do useEffect, pode removê-lo da importação do React:

import { useAxios } from "use-axios-client";

export default function App() {
  const { data, error, loading } = useAxios({
    url: "https://jsonplaceholder.typicode.com/posts/1"
  });

  if (loading || !data) return "Loading...";
  if (error) return "Error!";

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  ) 
}

Agora, você pode chamar o useAxios na parte superior do componente do app, passar o URL para o qual você deseja fazer a solicitação, e o hook retornará um objeto com os valores de que você precisa para tratar dos diversos states: loading, error e data resolvidos.

No processo de realização da solicitação, o valor de loading será true. Se houver um erro, você desejará mostrar o state de erro. Do contrário, se tiver os dados retornados, poderá exibi-los na interface do usuário.

O benefício de hooks personalizados cmo este está no fato de reduzir de verdade o código e de simplificá-lo no todo.

Se quiser buscar dados de maneira ainda mais simples com o Axios, experimente usar um hook useAxios personalizado como este.

E agora?

Parabéns! Você agora sabe como usar uma das bibliotecas de client HTTP mais poderosas para acelerar suas aplicações em React.

Espero que este guia tenha ajudado você.

Lembre-se de que você pode baixar este guia como uma ficha informativa em PDF (em inglês) e usá-la como referência futura.

Quer mais ainda? Faça parte do React Bootcamp

O React Bootcamp tem tudo o que você precisa saber sobre React e coloca isso tudo em um único pacote amplo, que inclui vídeos, fichas informativas e bônus especiais.

Obtenha informações que centenas de desenvolvedores já usaram para se tornarem profissionais em React, encontre o emprego dos seus sonhos e tenha o controle do seu futuro em suas mãos:

react-bootcamp-banner


Clique aqui para ser notificado quando abrirem vagas