Fazendo requisições HTTP com Fetch API: buscando dados da internet

Até aqui, você aprendeu como funciona assincronicidade com callbacks, promises e async/await.
Agora vamos usar isso em um cenário real: buscar dados de uma API com a Fetch API.

Pense assim: sua página “faz uma pergunta” para um servidor e recebe uma resposta.

O que é fetch?

fetch é uma função nativa do JavaScript que faz requisições HTTP (como GET, POST, etc.).

Ela retorna uma Promise, então você pode usar:

• .then() / .catch()
• ou async/await

Exemplo básico com .then()

fetch("https://jsonplaceholder.typicode.com/users")
  .then(function (resposta) {
    return resposta.json();
  })
  .then(function (dados) {
    console.log(dados);
  })
  .catch(function (erro) {
    console.log("Erro na requisição:", erro);
  });

O que acontece aqui?

1. fetch(...) faz a requisição.
2. resposta.json() converte o corpo da resposta para objeto JavaScript.
3. dados recebe o resultado convertido.
4. catch trata falhas de rede ou problemas na cadeia.

O mesmo exemplo com async/await

async function buscarUsuarios() {
  try {
    const resposta = await fetch("https://jsonplaceholder.typicode.com/users");
    const dados = await resposta.json();
    console.log(dados);
  } catch (erro) {
    console.log("Erro na requisição:", erro);
  }
}

buscarUsuarios();

Essa forma costuma ser mais legível.

Entendendo response

O fetch retorna um objeto de resposta com dados úteis, como:

• response.status (código HTTP: 200, 404, 500...)
• response.ok (true se status estiver entre 200 e 299)
• response.json() (converte resposta JSON)

Exemplo:

const resposta = await fetch(url);
console.log(resposta.status);
console.log(resposta.ok);

Requisição GET (buscar dados)

GET é o tipo padrão no fetch.

fetch("https://jsonplaceholder.typicode.com/posts");

Use quando quiser ler informações.

Requisição POST (enviar dados)

Para enviar dados, você define method, headers e body.

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    titulo: "Meu post",
    conteudo: "Aprendendo Fetch API"
  })
})
  .then(function (res) {
    return res.json();
  })
  .then(function (dados) {
    console.log("Criado:", dados);
  });

Boas práticas iniciais com Fetch

• Sempre trate erro (catch ou try...catch).
• Verifique response.ok para confirmar sucesso HTTP.
• Separe a função de busca da função que renderiza na tela.
• Mostre feedback ao usuário (carregando, sucesso, erro).

Exemplo completo com verificação de status

async function buscarPosts() {
  try {
    const resposta = await fetch("https://jsonplaceholder.typicode.com/posts");

    if (!resposta.ok) {
      throw new Error("Falha HTTP: " + resposta.status);
    }

    const posts = await resposta.json();
    console.log("Total de posts:", posts.length);
  } catch (erro) {
    console.log("Erro ao buscar posts:", erro.message);
  }
}

buscarPosts();

Resumo da lição

• fetch é a forma nativa de fazer requisições HTTP no JavaScript moderno.
• Ele retorna Promise e funciona bem com then/catch ou async/await.
• response.json() converte a resposta para objeto JavaScript.
• Verificar response.ok e tratar erros é essencial para aplicações reais.