Pesquisa de site

Como consumir APIs no React usando Fetch e Axios

Quer saber como usar APIs? Compreender como consumir APIs no React é um elemento-chave do uso da API.

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

Por meio de APIs, você é capaz de integrar partes de software em seu aplicativo sem o trabalho minucioso. Esse processo de usar uma API em seu aplicativo geralmente é chamado de consumo de uma API. Por exemplo, se 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 seu tempo.

Para aprender como consumir APIs REST no React usando Fetch e Axios, você construirá um aplicativo 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 caso de uso. Em termos de disponibilidade, as APIs podem ser APIs públicas, privadas, de parceiros ou compostas. Quando classificados de acordo com sua finalidade, podem ser banco de dados, remotos, sistemas operacionais ou APIs web. Neste artigo, consumiremos um tipo de API da web chamada API REST (Representational State).

As APIs REST permitem obter dados de uma fonte por meio 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, nomeadamente a API JavaScript Fetch e o cliente HTTP baseado em promessa Axios.

Pré-requisitos

Para acompanhar este guia, você deve ter:

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

Crie um aplicativo React

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

npx create-react-app catfact

Assim que a execução do comando for concluída, 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>Press the button for a random cat fact!</h2>
      <hr />
      <button>Get Cat fact</button>
    </div>
  );
}
export default App;

Em seguida, crie uma IU simples que será usada para exibir o fato aleatório do gato.

Em app.js

import './App.css';
function App() {
  return (
    <div className="App">
    <h2>Press the button for a random cat fact!</h2>
    <hr/>
    <button>Get Cat fact</button>
    </div>
  );
}
export default App;

Para estilizar seu aplicativo, adicione o seguinte código ao 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;
}

Seu aplicativo agora deve ficar assim.

Nas próximas etapas, você irá buscar dados da API e exibi-los no aplicativo.

Consumindo APIs REST usando Fetch

Fetch API é uma interface que permite obter recursos de uma API por meio de solicitações HTTP. O método fetch() recebe a URL do caminho para o recurso como argumento obrigatório e retorna uma promessa que pode resultar em uma resposta.

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

fetch(&lsquo;url to resource&rsquo;)
  .then(response => // handle response)
  .catch(err => // handle error)

Implementando API Fetch

No React, a API Fetch é usada da mesma forma que em JavaScript simples.

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

Na primeira linha do código acima, você está passando a URL da API para o método fetch(). fetch() retorna uma resposta HTTP que é convertida para JSON usando o método json(). Na terceira linha, você tem acesso aos dados que poderá utilizar no aplicativo. Finalmente, o bloco catch permite que você lide com erros normalmente.

Para implementar a solicitação de busca no componente do aplicativo, você usará ganchos React. Ao usar o gancho useEffect, seu aplicativo fará a solicitação assim que o componente for carregado e o gancho useState criará e atualizará o estado do componente. Manter o controle do estado garante que o componente seja renderizado novamente quando a API de busca retornar a resposta.

import useState and useEffect.
import { useEffect, useState } from 'react'

Crie um estado para armazenar o fato do gato e a função para atualizá-lo.

const [fact, setFact] = useState('')

Em seguida, crie uma função para fazer a solicitação GET à API e chame-a no gancho useEffect.

const fetchFact = () => {
fetch("https://catfact.ninja/fact")
  .then((response) => response.json())
  .then((data) => setFact(data.fact));
}
useEffect(() => {
  fetchFact()
}, []);

Seu arquivo app.js agora deve ficar assim:

import "./App.css";
import { useEffect, useState } from "react";
function App() {
  const [fact, setFact] = useState("");
  const fetchFact = () => {
  fetch("https://catfact.ninja/fact")
    .then((response) => response.json())
    .then((data) => setFact(data.fact));
}
useEffect(() => {
  fetchFact()
}, []);
return (
  <div className="App">
    <h2>Press the button for a random cat fact!</h2>
    <hr />
    <button>Get Cat fact</button>
    <p>{fact}</p>
  </div>
);
}
export default App;

Agora você deve conseguir ver um fato aleatório sobre gatos exibido em seu navegador.

A seguir, escreva um código para exibir um fato aleatório quando o botão for clicado.

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

<button onClick= {() => handleClick()}>Get Cat fact</button>

Defina a função handleClick() conforme mostrado abaixo.

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

Agora, ao clicar no botão, a função handleClick() chamará fetchData() que realizará a solicitação da API e atualizará o estado com um novo fato aleatório. Conseqüentemente, a UI do aplicativo será atualizada para exibir o fato atual.

Consumindo APIs REST usando Axios

Em vez de fetch(), você pode consumir APIs com Axios. Assim como fetch(), Axios permite fazer solicitações para um endpoint de API. No entanto, existem várias diferenças entre os dois.

  • O Axios retorna automaticamente a resposta em JSON enquanto você precisa convertê-la para JSON ao usar a API Fetch.
  • Axios requer apenas um retorno de chamada .then() diferente da API Fetch.
  • Axios é compatível com os principais navegadores, enquanto Fetch é compatível apenas com Chrome 42+, Edge 14 +, Firefox 39+ e Safari 10+

Implementando Axios

Instale o Axios executando o seguinte comando.

npm install axios

Após a conclusão da instalação, importe o pacote Axios para o componente do seu aplicativo e modifique a função fetchFact() para usá-lo.

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

É isso! Seu aplicativo deve exibir um fato aleatório sobre o gato quando for carregado no navegador e quando você clicar no botão.

Mais usos para APIs com React

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

Por exemplo, por meio de APIs de pagamento como Stripe e PayPal, as lojas podem lidar facilmente com as transações online dos clientes sem a necessidade de implementar elas próprias a funcionalidade. Portanto, mesmo usuários menos experientes em tecnologia podem criar aplicativos úteis que atendam às suas necessidades.

Artigos relacionados: