5.1 Fetch API
Para fazer requisições HTTP no JavaScript, a gente geralmente usa duas bibliotecas: função fetch embutida e a biblioteca de terceiros Axios. Ambas oferecem maneiras poderosas e flexíveis de interagir com APIs e outros recursos web.
Fetch API — é uma forma embutida nos navegadores para executar requisições HTTP. Ela se baseia em promises e oferece uma abordagem moderna e flexível para lidar com requisições de rede.
Sintaxe de uma simples requisição fetch:
let promise = fetch(url, {method, headers,
body})
Principais conceitos do Fetch:
fetch(url, options): o método principal para executar requisições HTTP- Retorna uma promise que resolve em um objeto Response
Exemplo de uma simples GET request usando Fetch:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Erro de rede: resposta inválida do servidor');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Erro ao executar a requisição: ', error);
});
Exemplo de uma POST request usando Fetch:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Erro ao executar a requisição: ', error);
});
Configurações do Fetch
Fetch API permite configurar diversos parâmetros da requisição através do objeto options, como método, headers, corpo da requisição, e outros.
const options = {
method: 'GET', // ou 'POST', 'PUT', 'DELETE' etc.
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // usado para requisições POST e PUT
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erro ao executar a requisição: ', error));
5.2 Biblioteca Axios
Axios é uma biblioteca popular para fazer requisições HTTP no JavaScript. Ela oferece um API mais conveniente e funcional comparado ao Fetch API nativo, além de suportar várias funcionalidades adicionais, como conversão automática de JSON, gerenciamento de timeouts, cancelamento de requisições e suporte a navegadores antigos.
Instalação do Axios
Você pode instalar o Axios através do npm ou incluir via CDN.
Instalação via npm:
npm install axios
Conectando no Node.js ou com o uso de bundlers (como Webpack):
// Para CommonJS
const axios = require('axios');
// Para módulos ES6
import axios from 'axios';
Conectando via CDN no navegador:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Sintaxe de uma simples GET request:
let promise = axios.get(url)
Sintaxe de uma simples POST request:
let promise = axios.post(url, data, config)
Principais conceitos do Axios:
- axios(config): método principal para executar requisições HTTP
- Aceita um objeto de configuração que pode incluir
url,method,headers,datae outros parâmetros. - Métodos atalho: Axios fornece métodos para cada método HTTP (
axios.get,axios.post,axios.put,axios.deleteetc.), o que facilita a execução das requisições correspondentes. - Promises: todos os métodos do Axios retornam uma Promise que resolve em um objeto de resposta ou é rejeitada em caso de erro.
Sintaxe de uma simples GET request com tratamento de resposta e erros:
axios.get(url)
.then(response => {
// Tratamento da resposta de sucesso
})
.catch(error => {
// Tratamento de erro
});
Sintaxe de uma simples POST request com tratamento de resposta e erros:
axios.post(url, data, config)
.then(response => {
// Tratamento da resposta de sucesso
})
.catch(error => {
// Tratamento de erro
});
Exemplo de uma simples GET request usando Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erro ao executar a requisição: ', error);
});
Exemplo de uma POST request usando Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erro ao executar a requisição: ', error);
});
5.3 Configuração do Axios
Configurações do Axios
Axios permite configurar requisições HTTP com o objeto config, que inclui parâmetros como
url, method, headers e dados (data).
Abaixo está um exemplo básico de configuração de uma requisição:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const config = {
method: 'get', // pode ser 'get', 'post', 'put', 'delete' etc.
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // Header para indicar o tipo de dados
},
// data: JSON.stringify(data) // Usado para requisições POST e PUT para enviar o corpo da requisição
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('Erro ao executar a requisição: ', error));
Recursos adicionais do Axios:
- Parâmetros de requisição: podem ser passados na URL.
- Cancelamento de requisições: com o uso do
AbortController. - Timeouts: configuração de tempo de espera para a requisição.
Exemplo de uso de parâmetros de requisição:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // Parâmetros de requisição são passados através do objeto params
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erro ao executar a requisição: ', error);
});
5.4 Comparação entre Fetch e Axios
Agora vamos dar uma olhada na comparação entre Fetch e Axios em termos de pontos chave:
1. Facilidade de uso:
- Fetch: fácil de usar para operações básicas, mas exige tratamento adicional para cenários complexos (por exemplo, conversão de JSON, tratamento de timeouts).
- Axios: oferece um API mais conveniente e poderoso para tratar requisições complexas.
2. Suporte a JSON:
- Fetch: exige chamada explícita do
response.json()para converter o corpo da resposta em JSON. - Axios: automaticamente converte respostas JSON.
3. Timeouts:
- Fetch: não tem suporte nativo a timeouts. Para implementar um timeout, é necessário usar
AbortControllerou wrappers. - Axios: suporta configuração de timeouts via configuração.
4. Interceptadores:
- Fetch: não suporta interceptadores de requisição e resposta.
- Axios: permite o uso de interceptadores para realizar lógica antes e depois de enviar a requisição.
Exemplo com interceptadores no Axios
Interceptors permitem realizar ações específicas antes do envio de uma requisição ou após o recebimento de uma resposta:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// Adicionando interceptador para requisições
axios.interceptors.request.use(config => {
console.log('Requisição enviada ao servidor: ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// Adicionando interceptador para respostas
axios.interceptors.response.use(response => {
console.log('Resposta recebida do servidor: ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// Exemplo de requisição com interceptadores
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('Erro ao executar a requisição: ', error));
Requisições paralelas usando Axios
Com o Axios, você pode facilmente executar requisições em paralelo e lidar com os resultados usando Promise.all():
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Promise.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => console.error('Erro ao executar a requisição: ', error));
GO TO FULL VERSION