Como consumir APIs em React usando Fetch e Axios

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ê pode integrar partes de software em seu aplicativo sem o trabalho minucioso. Esse processo de uso de uma API em seu aplicativo geralmente é chamado de consumo de uma API. Por exemplo, se você quiser exibir um determinado local em seu site, use a API do Google Maps em vez de implementar a funcionalidade de mapa do zero. As APIs, portanto, reduzem sua carga de trabalho e economizam seu tempo.

Para aprender a 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 API

As APIs podem ser classificadas por disponibilidade ou caso de uso. Em termos de disponibilidade, as APIs podem ser APIs públicas, privadas, parceiras ou compostas. Quando classificados de acordo com sua finalidade, podem ser banco de dados, remoto, sistemas operacionais ou APIs da web. Neste artigo, consumiremos um tipo de API web chamada REST (Representational State) API.

As APIs REST permitem que você obtenha 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, a saber, a API JavaScript Fetch e o cliente HTTP baseado em promessas Axios.

Relacionado: O que é a API REST e como você pode obter dados para seu aplicativo ou site

Pré-requisitos

Para acompanhar este guia, você deve ter:

• Noções básicas de JavaScript.
• Conhecimento básico de React e hooks React.
• NPM instalado localmente em sua máquina.
• Um editor de texto ou IDE de sua escolha instalado.

Criar 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

Quando o comando concluir a execução, abra o fato pasta em seu editor de texto. Você escreverá seu código no arquivo App.js no src então vá em frente e remova o código desnecessário.

import "./App.css";
função App() {
 Retorna (


Pressione o botão para um fato de gato aleatório!



Obter fato do gato



 );
}
exportar aplicativo padrão;

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

Dentro app.js

import './App.css';
função App() {
 Retorna (


Pressione o botão para um fato de gato aleatório!



Obter fato do gato



 );
}
exportar aplicativo padrão;

Para estilizar seu aplicativo, adicione o seguinte código ao app.css Arquivo.

@importar url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, wght@700;500&display=swap');
.Aplicativo {
 família de fontes: 'Playfair Display', serifa;
 margem: 20px 15vw;
}
h2 {
 família de fontes: 'Playfair Display', serifa;
 peso da fonte: 700;
 tamanho da fonte: 3em;
}
botão {
 preenchimento: 1em 1.2em;
 borda: nenhuma;
 tamanho da fonte: 1em;
 cor de fundo: #131212;
 cor: #ffffff;
 raio da borda: 0,5em;
 cursor: ponteiro;
}
botão: passar{
 cor de fundo:#3b3b3b;
}

Seu aplicativo agora deve ficar assim.

Nas próximas etapas, você buscará dados da API e os exibirá no aplicativo.

Relacionado: Como criar seu primeiro aplicativo React com JavaScript

Consumindo APIs REST usando Fetch

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

A sintaxe básica do buscar() método é o seguinte:

fetch('url para o recurso')
 .then (response => // trata da resposta)
 .catch (err => // trata o erro)

Implementando a API de busca

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

buscar(" https://catfact.ninja/fact")
 .then (resposta => resposta.json())
 .then (data => // trata os dados)
 .catch (err => // trata o erro)

Na primeira linha do código acima, você está passando o URL da API para o buscar() método. buscar() retorna uma resposta HTTP que é convertida em JSON usando o json() método. Na terceira linha, você obtém acesso aos dados que podem ser usados ​​no aplicativo. Por fim, o bloco catch permite que você lide com os erros com facilidade.

Para implementar a solicitação de busca no componente do aplicativo, você usará os ganchos do React. Ao usar o useEfeito hook, seu aplicativo fará a solicitação assim que o componente for carregado e o useState hook 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.

Relacionado: Hooks: O Herói do React

import useState e useEffect.
import { useEffect, useState } de 'reagir'

Crie um estado para manter o fato cat e a função para atualizá-lo.

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

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

const buscarFato = () => {
buscar(" https://catfact.ninja/fact")
 .then((resposta) => resposta.json())
 .then((data) => setFact (data.fact));
}
useEfeito(() => {
 buscarFato()
}, []);

Seu arquivo app.js agora deve ficar assim:

import "./App.css";
import { useEffect, useState } de "reagir";
função App() {
 const [fato, setFact] = useState("");
 const buscarFato = () => {
 buscar(" https://catfact.ninja/fact")
 .then((resposta) => resposta.json())
 .then((data) => setFact (data.fact));
}
useEfeito(() => {
 buscarFato()
}, []);
Retorna (


Pressione o botão para um fato de gato aleatório!



Obter fato do gato
{facto}




);
}
exportar aplicativo padrão;

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

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

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

 handleClick()}>Get Cat fact

Defina a handleClick() funcionar como mostrado abaixo.

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

Agora, quando você clica no botão, o handleClick() função irá chamar buscarDados() que realizará a solicitação da API e atualizará o estado com um novo fato aleatório. Consequentemente, a interface do usuário do aplicativo será atualizada para exibir o fato atual.

Consumindo APIs REST usando Axios

Em vez de buscar(), você pode consumir APIs com Axios. Como buscar(), o Axios permite que você faça solicitações a 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 em JSON ao usar a API Fetch.
• O Axios requer apenas um retorno de chamada .then() diferente 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 executando o seguinte comando.

npm instala axios

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

importar axios de 'axios'
const buscarFato = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (resposta.dados.fato)
 });
}

É isso! Seu aplicativo deve exibir um fato de gato aleatório 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 aplicativos do mundo real são infinitos.

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

O que é autenticação de API e como funciona?

Como você prova que a pessoa que deseja acessar dados importantes é quem diz ser? É aí que entra a autenticação da API...

Leia a seguir

Sobre o autor