A API Fetch
fetch(url) pede ao navegador que envie um pedido HTTP. Devolve logo uma Promise que normalmente resulta numa Response, não em JSON já analisado.
Primeiro Response, depois dados
await fetch(...) fornece estado, cabeçalhos e fluxo do corpo. response.json() lê o texto, analisa JSON e devolve outra Promise com dados JavaScript.
Duas etapas separadas
Separe transporte e análise. Uma resposta pode ter um estado importante sem ter JSON no corpo.
📊 Do pedido aos dados
| Expressão | Resultado | Significado |
|---|---|---|
| fetch(url) | Promise<Response> | pedido iniciado |
| await fetch(url) | Response | estado, cabeçalhos e fluxo do corpo |
| response.json() | Promise<any> | leitura e análise do corpo |
| await response.json() | dados JavaScript | objeto ou valor analisado |
fetch devolve uma Promise
O exemplo autónomo usa uma URL Blob apenas para mostrar o tipo. É um recurso na memória do navegador, não um endpoint HTTP da mesma origem.
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
const ticket = fetch(url);
console.log(ticket instanceof Promise);
ticket.finally(() => URL.revokeObjectURL(url));
A saída é true. Numa aplicação, troque a URL Blob por /data/drink.json.
Esperar Response e depois JSON
O exemplo seguinte cria o mesmo recurso local e faz as duas esperas.
async function loadDrink() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
console.log(data.drink);
} finally {
URL.revokeObjectURL(url);
}
}
loadDrink();
A saída é lida tea. Um ficheiro real /data/drink.json poderia conter {"drink":"lida tea"} e seria lido da mesma forma.
Verificar erros HTTP
fetch costuma resolver mesmo com HTTP 404 ou 500. Uma falha de rede pode rejeitar; um estado mau, por si só, geralmente não. Verifique response.ok ou response.status.
const response = new Response("Not found", {
status: 404,
statusText: "Not Found"
});
console.log(response.ok);
console.log(response.status);
A resposta criada mostra false e 404, as propriedades que inspecionaria após um fetch real. Só analise uma página de erro como JSON se a API o garantir.
json também devolve uma Promise
json() lê e analisa o corpo de forma assíncrona.
const response = new Response('{"drink":"lida tea"}', {
headers: { "Content-Type": "application/json" }
});
const dataPromise = response.json();
console.log(dataPromise instanceof Promise);
dataPromise.then(data => console.log(data.drink));
A saída é true. Depois de await response.json(), data é o objeto JavaScript e data.drink a string.
Demo sem depender de endpoint
A página obtém uma URL Blob e funciona sozinha. Mostra o fluxo e o estado 200, mas não finge ser um pedido ao servidor.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
async function load() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
document.getElementById("cup").textContent = data.drink;
document.getElementById("line").textContent =
response.status + " / " + data.drink;
} finally {
URL.revokeObjectURL(url);
}
}
load();
</script>
</body>
</html>
A página mostra 200 / lida tea. Em produção use uma URL HTTP e mantenha a verificação de ok antes da análise.
Experimente
Crie /data/drink.json num servidor local e substitua a URL Blob. Depois peça um caminho ausente e compare ok e status.
Erros comuns
Não confunda a Promise de fetch com dados. Chame e aguarde json(). Não dependa de catch para detetar todos os 404.
Memorize
fetch envia um pedido e dá uma Promise de Response. Verifique ok e analise o corpo esperado. response.json() dá uma Promise de dados.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo