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 sítio em seu site, use a API do Google Maps em vez de implementar a funcionalidade de planta do zero. As APIs, portanto, reduzem sua fardo 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 indumento 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 negócio com sua finalidade, podem ser banco de dados, remotos, sistemas operacionais ou APIs da web. Neste item, consumiremos um tipo de API da Web chamada API REST (Representational State).
As APIs REST permitem que você obtenha dados de uma manadeira por meio de uma URL. No React, existem vários métodos que você pode usar para consumir APIs REST. Nascente item discute os dois métodos mais populares, a saber, a API JavaScript Fetch e o cliente HTTP fundamentado em promessas Axios.
Pré-requisitos
Para escoltar nascente guia, você deve ter:
- Noções básicas de JavaScript.
- Conhecimento imprescindível de React e hooks React.
- NPM instalado localmente em sua máquina.
- Um editor de texto ou IDE de sua escolha instalado.
Produzir um aplicativo React
Primeiro, você precisará fabricar um aplicativo React. Copie o seguinte comando em seu terminal para configurar um envolvente de desenvolvimento React.
npx create-react-app catfact
Quando o comando concluir a realização, abra o indumento pasta em seu editor de texto. Você escreverá seu código no registo App.js no src portanto 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 interface do usuário simples que será usada para exibir o indumento de gato aleatório.
Dentro 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 app.css Registro.
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,[email protected];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 permanecer assim.
Nas próximas etapas, você buscará dados da API e os exibirá no aplicativo.
Consumindo APIs REST usando Fetch
A API Fetch é 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 porquê 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 to resource’)
.then(response => // handle response)
.catch(err => // handle error)Implementando a API de procura
No React, a API Fetch é usada da mesma forma que é usada em JavaScript simples.
fetch("https://catfact.ninja/fact")
.then(response => response.json())
.then(data => // handle data)
.catch(err => // handle error)
Na primeira traço do código supra, 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 traço, você obtém entrada aos dados que podem ser usados no aplicativo. Por termo, o conjunto catch permite que você lide com os erros com facilidade.
Para implementar a solicitação de procura no componente do aplicativo, você usará os ganchos do React. Ao usar o useEfeito hook, seu aplicativo fará a solicitação logo que o componente for repleto 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 procura retornar a resposta.
import useState and useEffect.
import { useEffect, useState } from 'react'Crie um estado para manter o indumento 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 fetchFact = () => {
fetch("https://catfact.ninja/fact")
.then((response) => response.json())
.then((data) => setFact(data.fact));
}
useEffect(() => {
fetchFact()
}, []);
Seu registo app.js agora deve permanecer 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 poder ver um indumento aleatório sobre gatos exibido em seu navegador.
Em seguida, escreva o código para exibir um indumento aleatório quando o botão for clicado.
Modifique o botão para incluir um ao clicar evento e sua função de manipulador.
<button onClick= {() => handleClick()}>Get Cat fact</button>
Defina a handleClick() funcionar porquê mostrado aquém.
const handleClick = () => {
fetchFact()
}Agora, quando você clica no botão, o handleClick() função irá invocar buscarDados() que realizará a solicitação da API e atualizará o estado com um novo indumento aleatório. Consequentemente, a interface do usuário do aplicativo será atualizada para exibir o indumento atual.
Consumindo APIs REST usando Axios
Em vez de buscar(), você pode consumir APIs com Axios. Uma vez que 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 maquinalmente a resposta em JSON enquanto você precisa convertê-la em JSON ao usar a API Fetch.
- O Axios requer unicamente um retorno de chamada .then() dissemelhante da API Fetch.
- O Axios é comportável com os principais navegadores, enquanto o Fetch é suportado unicamente no Chrome 42+, Edge 14+, Firefox 39+ e Safari 10+
Implementando Axios
Instale o Axios executando o seguinte comando.
npm install axiosEm seguida a peroração da instalação, importe o pacote Axios para o componente do seu aplicativo e modifique o buscarFato() função para usá-lo.
import axios from ‘axios’
const fetchFact = () => {
axios.get("https://catfact.ninja/fact").then((response) => {
setFact(response.data.fact)
});
}É isso! Seu aplicativo deve exibir um indumento de gato aleatório quando for repleto 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 porquê usar Fetch e Axios para buscar um indumento 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 porquê Stripe e PayPal, as lojas podem mourejar facilmente com transações de clientes on-line sem a premência de implementar a funcionalidade por conta própria. Portanto, usuários ainda menos experientes em tecnologia podem fabricar aplicativos úteis que atendam às suas necessidades.
Leia a seguir
Sobre o responsável
