Como usar as APIs Fetch no React

No desenvolvimento web moderno, integrar dados de fontes externas é uma necessidade comum. React, uma popular biblioteca JavaScript para construção de interfaces de usuário, fornece uma maneira simples de buscar dados de APIs.

Neste guia, vamos explorar o processo de busca de dados de uma API em React, acompanhado de um exemplo prático. Além disso, forneceremos uma maneira simples de gerar o código do Fetch Client com um clique no Apidog.

botão

O que é uma API?

Uma API (Interface de Programação de Aplicações) é um conjunto de regras e protocolos que permite que diferentes aplicações de software se comuniquem e interajam entre si.

Por exemplo, quando você usa um aplicativo de clima no seu telefone, ele provavelmente interage com a API de um serviço de clima para recuperar dados climáticos atuais para a sua localização. O aplicativo envia uma solicitação à API do serviço de clima seguindo um formato específico, e a API responde com as informações climáticas solicitadas, facilitando a integração sem falhas entre os dois sistemas de software.

Criando APIs em React com a Fetch API

A Fetch API fornece uma interface moderna para fazer requisições HTTP como GET e POST a partir do navegador. Ela usa promessas JavaScript, o que torna o trabalho com requisições e respostas mais fácil. Para fazer uma solicitação, você simplesmente chama o método fetch(), passa a URL de onde buscar, e então lida com a resposta quando ela for resolvida. Isso é muito mais simples do que trabalhar diretamente com Requisições XMLHttp.

Ao usar Fetch com React, você pode fazer solicitações em métodos do ciclo de vida do componente, como useEffect, e atualizar o estado do componente quando os dados forem recebidos. Isso permite que você busque dados de uma API e os exiba na sua UI.

A Fetch API se integra bem com React, já que ambas usam promessas. Você pode lidar com estados de carregamento e erro para tornar a experiência suave para o usuário. De modo geral, Fetch combinado com React é uma combinação muito poderosa para construir aplicações de página única orientadas a dados.

Como Usar as APIs Fetch em React com Exemplo Detalhado

Para aqueles que estão familiarizados com a biblioteca JavaScript, aqui está outra maneira de usar a Fetch API em React.

Criar um App React

Configurar um projeto React envolve uma série de etapas. Aqui está um guia básico para ajudar você a começar:

1. Instalar Node.js e npm: Baixe e instale o Node.js e o npm em https://nodejs.org/.

2. Criar um App React: Abra seu terminal e execute npx create-react-app my-react-app. Substitua "my-react-app" pelo nome de projeto que você preferir.

3. Iniciar o Servidor de Desenvolvimento:

Entre na sua pasta de projeto com cd my-react-app.
Lance o servidor de desenvolvimento com npm start.
Seu aplicativo React será aberto em http://localhost:3000/ no navegador.

É isso! Você criou com sucesso um aplicativo React em apenas três etapas simples. Agora você pode mergulhar no seu código, fazer modificações e ver as mudanças em tempo real enquanto desenvolve sua aplicação.

Usar a Fetch API em React

Usar a Fetch API em React envolve fazer requisições HTTP a recursos ou APIs externas. Aqui está um guia simples sobre como usar a Fetch API em um componente React:

Etapa 1: Importar React e o Hook useState

import React, { useState, useEffect } from 'react';

Etapa 2: Criar um Componente Funcional

function MyComponent() {
  // Estado para armazenar os dados buscados
  const [data, setData] = useState(null);

  // Efeito para buscar dados quando o componente é montado
  useEffect(() => {
    fetchData();
  }, []); // Array de dependência vazio garante que o efeito seja executado uma vez ao montar

  // Função para buscar dados
  const fetchData = async () => {
    try {
      // Fazer uma requisição GET usando a Fetch API
      const response = await fetch('https://api.example.com/data');
      
      // Verificar se a resposta é bem-sucedida (código de status 200-299)
      if (!response.ok) {
        throw new Error('A resposta da rede não estava ok');
      }

      // Analisar os dados JSON da resposta
      const result = await response.json();

      // Atualizar o estado com os dados buscados
      setData(result);
    } catch (error) {
      console.error('Erro ao buscar dados:', error.message);
    }
  };

  // Renderizar o componente
  return (
    <div>
      {data ? (
        // Exibir os dados buscados
        <p>{JSON.stringify(data)}</p>
      ) : (
        // Exibir uma mensagem de carregamento ou outra UI enquanto os dados estão sendo buscados
        <p>Carregando...</p>
      )}
    </div>
  );
}

export default MyComponent;

Etapa 3: Usar o Componente

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>Exemplo de Fetch em React</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Neste exemplo:

Usamos a fetch função para fazer uma requisição GET a um endpoint hipotético de API (https://api.example.com/data).
Manipulamos a resposta, verificando se foi bem-sucedida e analisando os dados JSON.
Os dados buscados são armazenados no estado do componente usando a função setData.
O componente renderiza os dados buscados ou uma mensagem de carregamento, dependendo do estado.

Geração de Código de Cliente com Um Clique com Apidog

A integração suave com serviços de backend é um pilar do desenvolvimento frontend, frequentemente alcançada através da Fetch API. Essa interface facilita requisições HTTP diretas do navegador, concedendo às aplicações React a capacidade de recuperar dados de maneira eficiente de backends ou APIs externas.

Para aqueles desenvolvedores que podem achar a codificação detalhada de requisições de API dentro do React desafiadora, ferramentas de geração de código de cliente com um clique, como Apidog, apresentam uma economia de tempo valiosa. Aqui está um exemplo de API de pet shop POST.

Clique no ícone para gerar o código do cliente como segue:

Aqui está o resultado da pesquisa de dados.

Apidog simplifica esse processo convertendo as especificações da API de backend em código pronto para uso no lado do cliente, correspondendo precisamente às estruturas de dados e endpoints necessários e evitando a complexidade e erros associados à codificação manual.

Integrando o Código de Cliente Gerado em um App React

O código de cliente gerado pode ser integrado em uma aplicação React seguindo estas etapas gerais:

Importar Arquivos Gerados para o App React: Copie os arquivos gerados (ou a pasta inteira) para o seu projeto React. Certifique-se de que esses arquivos são compatíveis com a estrutura do seu projeto.

2. Importar e Usar Funções de Requisição de API Geradas: Em seu componente React ou em outro local apropriado, importe as funções de requisição de API geradas e as use. Por exemplo:

import { createPet, getPetById } from './path/to/generated/api';

// Usar em um componente ou em outro lugar
async function fetchData() {
  try {
    const newPet = await createPet({ name: 'Fido', age: 2 });
    const petDetails = await getPetById(newPet.id);
    console.log(petDetails);
  } catch (error) {
    console.error('Erro ao buscar dados:', error.message);
  }
}

3. Manipular Dados: Processar os dados retornados das requisições de API, potencialmente atualizando o estado do componente, renderizando a UI, etc.

Dica Bônus do Apidog:

A vantagem de aproveitar o Apidog se estende à sua funcionalidade de simulação, permitindo que os desenvolvedores emulem respostas de backend, uma capacidade crítica durante as etapas iniciais de desenvolvimento ou quando as APIs de backend ainda não estão prontas.

Esses dados simulados garantem que o desenvolvimento frontend permaneça no cronograma, permitindo o trabalho na interface do usuário, na experiência do usuário e na lógica geral da aplicação sem dependência da prontidão do backend.

botão