O Que é AXIOS ?

Axios é uma biblioteca HTTP utilizada para fazer requisições, pode ser tanto usado do lado servidor quando do lado do cliente.

O Axios é utilizado em diversos projetos por conta da sua praticidade e usabilidade, e por ser superior a FecthAPI do próprio JavaScript. Além de ser necessário menos código para montar a requisição o Axios tem um tratamento de erros mais refinado. E um dos pontos positivos que já citei anteriormente é o fato de ser possível usar do lado do servidor e do cliente.

Vamos abrir nosso código fonte da aplicação, caso não tenha criado ainda o projeto REACT basta efetuar o npx create-react-app NOME_DO_PROJETO, ou se desejar basta usar um compilador online(react.new/codepen/stackblitz). Após isso entre na pasta do projeto e instale o axios. Para isso basta usar ou o yarn ou npm, exemplo: npm install axios. Nesse nosso exemplo vamos usar o endpoint da API Jsonplaceholder.

É importante saber quais são os endpoints da API, se elas estão funcionando corretamente, para esse nosso caso basta entrar no site JSONPlaceHolder e verificar. Abaixo irei deixar um print das rotas.

Para conseguir captar os dados da API, basta utilizar o método GET e fazer os devidos tratamentos de dados e montar o layout da maneira que você deseja. No nosso arquivo App.js iremos colocar esse código.

import axios from 'axios';
import './App.css';
import { useEffect, useState } from 'react';

const url = "https://jsonplaceholder.typicode.com/posts";

function App() {
  const [post, setPost] = useState(null);

  useEffect(() => {
    axios.get(url).then((res) => {
      setPost(res.data);
    });
  }, []);

  if (!post) return null;

  return (
    <div>
      {post.map((data) => (
        <>
          <h1>Titulo: {data.title}</h1>
          <p>Descrição: {data.body}</p>
        </>
      ))}
    </div>
  )
}

export default App;

Explicação da requisição com o AXIOS

No código acima utilizamos o useEffect para assim que o usuario entrar na pagina ocorrer uma requisição, para isso devemos deixa a dependencia vazia. Logo após precisamos armazenar esses dados em algum canto, para isso utilizamos o useState, ele é um gerenciador de estados do React.

Após declararmos ele, podemos utiliza-lo para armazenar os dados vindos da API. Nesse ponto é importante saber como que a API esta retornando os dados e partir disso montar nossa estrutura, como sei que JSONPlaceholder em cada objeto ele possui um title, body, userID e id, basta pegar o estado post na qual está armazenado os dados e listar eles. Para essa listagem utilizei o método map que chama um callback e passa por cada elemento do Array e logo após que termina ele nos devolve um novo Array com os novos resultados.

Dentro desse map basta montar a estrutura que você deseja para mostrar os dados. Ah é sempre importante verificar se os dados do estado existem para não quebrar a aplicação caso realmente não existam para isso utilizei if (!post) return null.

Como ficou:

Espero que tenham gostado dessa breve postagem, até a próxima.

Referencias: React, JSONPlaceHolder, Axios

Você também pode gostar:
Como fazer um POST request a uma API usando Javascript – FrontMaster