Como usar o Axios no ReactJs

Com o ReactJs, uma das formas de realizar requisições HTTP é através do Axios, uma biblioteca JavaScript que fornece uma maneira fácil de enviar e receber dados de APIs externas. Neste post, vou explicar como usar os métodos HTTP get, post, put e delete no ReactJs com Axios, e fornecer exemplos de código para cada tipo de requisição.

Antes de começar, é importante lembrar que você precisará ter o Axios instalado em seu projeto ReactJs para seguir os exemplos abaixo. Você pode instalá-lo através do gerenciador de pacotes NPM usando o seguinte comando:

npm install axios

HTTP GET

O método HTTP GET é usado para obter dados de um servidor. Para realizar uma requisição GET com o Axios no ReactJs, você pode usar o seguinte exemplo de código:

import axios from 'axios';

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

Este código envia uma requisição GET para o endpoint "https://api.example.com/data" e, em seguida, imprime a resposta no console. Se houver algum erro na requisição, o Axios irá capturá-lo e imprimir no console também.

HTTP POST

O método HTTP POST é usado para enviar dados para um servidor. Para realizar uma requisição POST com o Axios no ReactJs, você pode usar o seguinte exemplo de código:

import axios from 'axios';

const data = {
  name: 'John Doe',
  age: 30
};

axios.post('https://api.example.com/data', data)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Este código envia uma requisição POST para o endpoint "https://api.example.com/data" com os dados contidos na constante "data" e, em seguida, imprime a resposta no console. Se houver algum erro na requisição, o Axios irá capturá-lo e imprimir no console também.

HTTP PUT

O método HTTP PUT é usado para atualizar dados em um servidor. Para realizar uma requisição PUT com o Axios no ReactJs, você pode usar o seguinte exemplo de código:

import axios from 'axios';

const data = {
  name: 'John Doe',
  age: 35
};

axios.put('https://api.example.com/data/123', data)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Este código envia uma requisição PUT para o endpoint "https://api.example.com/data/123" com os dados contidos na constante "data" e, em seguida, imprime a resposta no console. Se houver algum erro na requisição, o Axios irá capturá-lo e imprimir no console também.

HTTP DELETE

O método HTTP DELETE é usado para excluir dados em um servidor. Para realizar uma requisição DELETE com o Axios no ReactJs, você pode usar o seguinte exemplo de código:

import axios from 'axios';

axios.delete('https://api.example.com/data/123')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Este código envia uma requisição DELETE para o endpoint "https://api.example.com/data/123" e, em seguida, imprime a resposta no console. Se houver algum erro na requisição, o Axios irá capturá-lo e imprimir no console também.

Concluindo

Lembre-se de que esses exemplos são apenas uma base para começar a trabalhar com o Axios no ReactJs. Você pode personalizar a configuração da sua requisição para atender às suas necessidades, como adicionar cabeçalhos personalizados ou definir configurações de timeout.

O Axios fornece uma ampla variedade de opções para personalizar suas requisições. Você pode conferir mais informações na documentação oficial do Axios: https://github.com/axios/axios.