JavaScript Web Intermediário
fetch e JSON
O fetch é a API moderna do JavaScript para fazer requisições HTTP de forma assíncrona, retornando uma Promise. Ele é a base para consumir APIs e carregar dados em aplicações web. Diferente do antigo XMLHttpRequest, o fetch usa Promises e tem uma sintaxe mais limpa.
Ao receber uma resposta, você precisa verificar o status HTTP (como 200 para sucesso, 404 para não encontrado) e então converter o corpo para um formato utilizável, geralmente JSON. O método response.json() lê o corpo da resposta e o transforma em um objeto JavaScript automaticamente.
Para enviar dados, você pode usar JSON.stringify() para converter um objeto em string JSON antes de enviar no corpo da requisição. E para interpretar uma string JSON recebida, usa-se JSON.parse(). Essas duas funções são essenciais para a comunicação com APIs.
O tratamento de erros é crucial: fetch só rejeita a Promise em caso de falha de rede, não para status HTTP de erro. Portanto, é preciso verificar response.ok ou response.status manualmente e lançar um erro se necessário.
Pontos-chave
fetch(url)retorna uma Promise que resolve para um objetoResponse.response.json()também retorna uma Promise que resolve para o objeto JavaScript desserializado.- Use
JSON.stringify()para converter objetos em string JSON antes de enviar. - Use
JSON.parse()para converter string JSON em objeto JavaScript. fetchnão rejeita a Promise para status HTTP de erro; verifiqueresponse.okouresponse.status.
// Exemplo: buscar dados de uma API pública e tratar erros
async function buscarUsuario(id) {
try {
const resposta = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
// Verifica se o status HTTP indica sucesso (200-299)
if (!resposta.ok) {
throw new Error(`Erro HTTP: ${resposta.status}`);
}
// Converte o corpo da resposta para objeto JavaScript
const usuario = await resposta.json();
console.log('Usuário:', usuario.name);
console.log('Email:', usuario.email);
} catch (erro) {
console.error('Falha na requisição:', erro.message);
}
}
// Exemplo: enviar dados como JSON
async function criarPost(titulo, corpo) {
const dados = { title: titulo, body: corpo, userId: 1 };
try {
const resposta = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(dados) // Converte objeto para string JSON
});
if (!resposta.ok) throw new Error(`Erro HTTP: ${resposta.status}`);
const postCriado = await resposta.json();
console.log('Post criado com ID:', postCriado.id);
} catch (erro) {
console.error('Erro ao criar post:', erro.message);
}
}
// Executa os exemplos
buscarUsuario(1);
criarPost('Título', 'Conteúdo do post');