Como consumir APIs no React usando Fetch e Axios

Uma API (Application Programming Interface) é um conjunto de protocolos que permite que uma aplicação envie solicitações a um servidor e receba uma resposta.

Através das APIs, você é capaz de integrar pedaços de software em sua aplicação sem o trabalho minucioso. Esse processo de usar uma API em sua aplicação é geralmente chamado de consumir uma API. Por exemplo, se você quiser exibir um determinado local em seu site, você usaria a API do Google Maps em vez de implementar a funcionalidade do mapa do zero. As APIs, portanto, reduzem sua carga de trabalho e economizam tempo.

Para aprender como consumir APIs REST no React usando Fetch e Axios, você construirá uma aplicação React simples que obtém um fato aleatório sobre gatos de uma API quando você clica em um botão.

Tipos de APIs

As APIs podem ser classificadas por disponibilidade ou uso. Em termos de disponibilidade, as APIs podem ser públicas, privadas, parceiras ou APIs compostas. Quando classificadas de acordo com seu propósito, podem ser APIs de banco de dados, remotas, sistemas operacionais ou web. Neste artigo, estaremos consumindo um tipo de API web chamada REST (Representational State) API.

As APIs REST permitem que você obtenha dados de uma fonte através de uma URL. No React, existem vários métodos que você pode usar para consumir APIs REST. Este artigo discute os dois métodos mais populares, a saber, a API JavaScript Fetch e o cliente HTTP baseado em promises, Axios.

Pré-requisitos

Para acompanhar este guia, você deve ter:

Compreensão básica de JavaScript.
Conhecimento básico de React e React hooks.
NPM instalado localmente em sua máquina.
Um editor de texto ou IDE de sua escolha instalado.

Criar uma aplicação React

Primeiro, você precisará criar uma aplicação React. Copie o seguinte comando em seu terminal para configurar um ambiente de desenvolvimento React.

npx create-react-app gatos-fatoc

Uma vez que o comando tenha concluído a execução, abra a pasta catfact em seu editor de texto. Você escreverá seu código no arquivo App.js na pasta src, então vá em frente e remova o código desnecessário.

import "./App.css";
function App() {
  return (
    <div className="App">
      <h2>Clique no botão para ver fatos sobre gatos</h2>
      <hr />
      <button>Ver fato</button>
    </div>
  );
}
export default App;

Depois adicione a seguinte lógica para criar uma interface de usuário simples:

No app.js

import "./App.css";
function App() {
  return (
    <div className="App">
      <h2>Clique no botão para ver fatos sobre gatos</h2>
      <hr />
      <button>Ver fato</button>
    </div>
  );
}
export default App;

Para estilizar seu app, adicione as seguintes regras no arquivo app.css:

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@700;500&display=swap');
.App {
  font-family: 'Playfair Display', serif;
  margin: 20px 15vw;
}
h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 3em;
}
button {
padding: 1em 1.2em;
  border: none;
  font-size: 1em;
  background-color: #131212;
  color: #ffffff;
border-radius:0.5em;
  cursor: pointer;
}
button:hover{
  background-color:#3b3b3b;
}

Nos próximos passos, vamos consultar os dados da API e exibir na aplicação.

Consumindo dados da API utilizando Fetch

A API Fetch é uma interface que permite você obter recursos de uma API através de requisições HTTP. O método fetch() recebe a URL do caminho para o recurso como argumento obrigatório e retorna uma promessa que pode ser resolvida para uma resposta.

A sintaxe básica do método fetch() é a seguinte:

fetch("url to resource")
  .then(response => // tratar resposta)
  .catch(err => // tratar erro)

Implementando Fetch API

No React, a Fetch API é utilizado do mesmo modo que em Javascript puro.

fetch("https://catfact.ninja/fact")
  .then(response => response.json())
  .then(data => // tratar data)
  .catch(err => // tratar error)

Na primeira linha no código acima, você está passando a URL da API para o método fetch(). O fetch() retorna uma resposta HTTP que é convertida em JSON usando o método json(). Na terceira linha, você tem acesso aos dados, que você pode então usar na aplicação. Por fim, o bloco catch permite que você lidar com erros de forma elegante.

Para implementar o pedido fetch no componente da aplicação, você usará os hooks do React. Ao usar o hook useEffect, sua aplicação fará o pedido assim que o componente carregar e o hook useState criará e atualizará o estado do componente. Mantendo o controle do estado garante que o componente seja renderizado novamente quando a API fetch retornar a resposta.

import { useEffect, useState } from 'react'

Criando o estado da lista de gatos e a função para atualizar a lista:

const [fato, setFato] = useState('')

E então, crie a função para fazer a requisição GET para a API e depois chama-lá dentro do hook useEffect.

const fetchFact = () => {

fetch("https://catfact.ninja/fact")
  .then((response) => response.json())
  .then((data) => setFato(data.fact));
}

useEffect(() => {
  fetchFact()
}, []);

O arquivo app.js agora deve estar algo como:

import { useEffect, useState } from"react";
import "./App.css";

function App() {
    const [fato, setFato] = useState('')

    const fetchFact = () => {

    fetch("https://catfact.ninja/fact")
      .then((response) => response.json())
      .then((data) => setFato(data.fact));
    }

    useEffect(() => {
      fetchFact()
    }, []);

  return (
    <div className="App">
      <h2>Clique no botão para ver fatos sobre gatos</h2>
      <hr />
      <button>Ver fato</button>
      <p>{fato}</p>
    </div>
  );
}
export default App;

Agora, seu app já está buscando uma lista aleatório de gatos, em seguida vamos escrever o código para exibir a lista quando o botão for clicado.

Modifique o botão para incluir um evento onClick e sua função manipuladora.

<button onClick= {() => handleClick()}>Ver fato</button>

Defina a função handleClick() logo após o código fetch(...)... como mostrado abaixo:

const handleClick = () => {
  fetchFact()
}

Agora, quando você clicar no botão, a função handleClick() chamará fetchFact(), que realizará a requisição da API e atualizará o estado com uma nova lista aleatória. Consequentemente, a interface de usuário da aplicação será atualizada para exibir o fato atual.

Consumindo API utilizando Axios

Em vez de fetch(), você pode consumir APIs com Axios. Assim como fetch(), o Axios permite que você faça solicitações a um ponto final da API. No entanto, existem várias diferenças entre os dois.

O Axios retorna automaticamente a resposta em JSON enquanto você precisa convertê-lo em JSON ao usar a API Fetch. O Axios requer apenas um callback .then(), ao contrário da API Fetch. O Axios é compatível com os principais navegadores enquanto o Fetch é suportado apenas no Chrome 42+, Edge 14+, Firefox 39+ e Safari 10+.

Implementando Axios

Instale o axios utilizando o seguinte comando:

npm install axios

Após concluída a instalação, importe o pacote do axios no seu componente e modifique a função fetchFact() para utiliza-lo:

import axios from "axios";
const fetchFact = () => {
      axios.get("https://catfact.ninja/fact").then((response) => {
      setFato(response.data.fact)
  });
}

É isso! Sua aplicação deve exibir um fato aleatório sobre gatos quando carregar no navegador e quando você clicar no botão.

Mais usos de APIs com React

Você pode consumir APIs REST no React usando vários métodos. Neste tutorial, você aprendeu a usar Fetch e Axios para buscar um fato aleatório de uma API REST. Os casos de uso de APIs em aplicativos do mundo real são intermináveis.

Por exemplo, através de APIs de pagamento como Stripe e PayPal, as lojas podem facilmente lidar com transações de clientes on-line sem precisar implementar a funcionalidade por conta própria. Portanto, mesmo usuários menos habilidosos em tecnologia podem criar aplicativos úteis que atendam às suas necessidades.