Como fazer uma requisição de API no React?

No desenvolvimento de aplicações web modernas, a comunicação com APIs é um aspecto fundamental. O React, uma biblioteca JavaScript para construir interfaces de usuário, oferece suporte para realizar requisições de APIs de forma simples e eficiente. Neste artigo, exploraremos como fazer requisições de API no React, utilizando a biblioteca Axios como exemplo.

Requisições utilizando Axios -

O Axios é uma grande ferramenta de requisição de dados em uma API,o fazendo de maneira fácil e intuitiva. Com eles, conseguimos utilizar os métodos HTTP, incluindo GET, POST, PUT e DELETE. Mas para poder fazer uso do Axios, é necessário o instalar.

Instalando o Axios -

Precisamos abrir nosso terminal e usar o seguinte comando(pode ser instalado via npm e yarn):

npm install axios

//ou 

yarn add axios

Testando uma requisição com Axios -

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Neste exemplo, utilizamos o método get do Axios para realizar a requisição para a URL especificada. Em seguida, utilizamos o método then para lidar com a resposta da API, que será retornada no parâmetro response. Por fim, utilizamos o método catch para lidar com possíveis erros que possam ocorrer durante a requisição.

Aplicando Hooks na requisição de API no React-

Nós também podemos usar um raciocínio de Hooks quando estivermos escrevendo nossa consulta de API no React. Para fazer requisições, podemos utilizar o useState para armazenar o resultado da requisição e o useEffect para carregar a requisição do componente. Veja o exemplo mais abaixo:

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

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setPosts(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

Neste exemplo que acabamos de ver, utilizamos o useState para inicializar a variável posts como um array vazio. Em seguida, utilizamos o useEffect para realizar a requisição para a API assim que o componente é montado. Utilizamos o segundo parâmetro do useEffect (um array vazio) para garantir que a requisição seja disparada apenas uma vez, quando o componente é montado.

Com base nisso, vimos como realizar requisições de API no React utilizando a biblioteca Axios. Vimos também como utilizar Hooks para disparar alguma chamada de API, e como o processo é simples de se fazer.