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.
LEIA TAMBÉM: