Como consumir apis usando Axios no React

Uma das tarefas mais comuns no desenvolvimento de aplicativos web é a integração com APIs externas para obter ou enviar dados. O Axios é uma biblioteca JavaScript popular que torna esse processo mais simples e eficiente. Neste tutorial, vamos aprender como consumir APIs usando o Axios em um aplicativo React.

Passo 1: Configurando seu projeto React

Antes de começarmos a consumir APIs, certifique-se de ter um projeto React.js em funcionamento. Você pode criar um novo projeto Create React App ou usar um projeto existente.

npx create-react-app axios-api-example
cd axios-api-example

Passo 2: Instalando o Axios

Para começar, instale o Axios em seu projeto usando o npm:

npm install axios

Passo 3: Importando o Axios

Em seguida, importe o Axios em seu componente React onde você deseja fazer a chamada da API.

import axios from 'axios';

Passo 4: Fazendo uma chamada GET

A chamada GET é utilizada para obter informações e recursos de um servidor, veja um exemplo:

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

function App() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {

    axios.get('https://jsonplaceholder.typicode.com/todos')
      .then((response) => {
        setTasks(response.data);
      })
      .catch((error) => {
        console.error('Erro ao buscar dados da API: ', error);
      });
  }, []);

  return (
    <div>
      <h1>Lista de Tarefas</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Neste exemplo, usamos o useEffect para fazer a chamada GET assim que o componente for montado. Os dados da resposta são armazenados no estado local e exibidos na página.

Passo 5: Fazendo uma chamada POST

A chamada POST é usada para enviar dados ao servidor com o objetivo de criar um novo recurso no servidor. 

axios.post('https://jsonplaceholder.typicode.com/todos', {
  title: 'Nova Tarefa',
  completed: false,
})
.then((response) => {
  console.log('Dados enviados com sucesso: ', response.data);
})
.catch((error) => {
  console.error('Erro ao enviar dados: ', error);
});

Passo 6: Fazendo uma chamada PUT

A chamada PUT é usada para atualizar recursos existentes no servidor. Vamos supor que estamos atualizando uma tarefa em uma lista de tarefas:

axios.put('https://jsonplaceholder.typicode.com/todos/1', {
  title: 'Tarefa Atualizada',
  completed: true,
})
.then((response) => {
  console.log('Tarefa atualizada com sucesso: ', response.data);
})
.catch((error) => {
  console.error('Erro ao atualizar tarefa: ', error);
});

Passo 7: Fazendo uma chamada DELETE

A chamada DELETE é usada para remover um recurso do servidor. Suponha que queremos excluir uma tarefa com ID 1:

axios.delete('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => {
  console.log('Tarefa excluída com sucesso');
})
.catch((error) => {
  console.error('Erro ao excluir tarefa: ', error);
});

Conclusão

O Axios é uma ferramenta poderosa para consumir APIs em aplicativos React.js. Com as chamadas HTTP simplificadas que ele oferece, você pode facilmente integrar seu aplicativo com uma variedade de serviços web externos.