Fácil JavaScript

Buscando e exibindo um usuário

Enunciado

Crie uma função buscarUsuario(id) que faz uma requisição GET para https://jsonplaceholder.typicode.com/users/{id} e exibe no console o nome e o email do usuário. Trate erros de status HTTP e falhas de rede.

Requisitos

  • A função deve usar fetch para buscar o usuário.
  • Deve verificar response.ok e lançar erro se o status for >= 400.
  • Deve usar response.json() para obter os dados.
  • Deve exibir Nome: [name] e Email: [email] no console.

Código inicial

async function buscarUsuario(id) {
  // Seu código aqui
}

buscarUsuario(1);

Saída esperada

Nome: Leanne Graham
Email: Sincere@april.biz
Ver dica

Use await fetch(...), depois await resposta.json(). Verifique resposta.ok antes de converter para JSON.

Mostrar solução 
async function buscarUsuario(id) {
  try {
    const resposta = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    if (!resposta.ok) {
      throw new Error(`Erro HTTP: ${resposta.status}`);
    }
    const usuario = await resposta.json();
    console.log(`Nome: ${usuario.name}`);
    console.log(`Email: ${usuario.email}`);
  } catch (erro) {
    console.error('Falha na requisição:', erro.message);
  }
}

buscarUsuario(1);

Passo a passo

  1. A função buscarUsuario é declarada como async para podermos usar await.
  2. Dentro do try, chamamos fetch com a URL do usuário e aguardamos a resposta.
  3. Verificamos resposta.ok: se for false, lançamos um erro com o status HTTP.
  4. Convertemos o corpo da resposta para um objeto JavaScript com await resposta.json().
  5. Exibimos o nome e o email do usuário no console usando template strings.
  6. O bloco catch captura qualquer erro (de rede ou o que lançamos) e exibe uma mensagem.
  7. Chamamos a função com o ID 1 para testar.

Por que funciona

O fetch retorna uma Promise que resolve para um objeto Response. A propriedade ok é true para status entre 200 e 299. Se não for ok, lançamos um erro para ser capturado. O método json() lê o corpo e o converte de JSON para objeto. Assim, obtemos os dados do usuário e os exibimos.

Erros comuns

  • Esquecer de verificar resposta.ok: se o status for 404, resposta.json() pode falhar ou retornar dados inesperados. Sempre verifique.
  • Não usar await em resposta.json(): resposta.json() retorna uma Promise; sem await, você terá uma Promise pendente, não o objeto.
  • Não tratar erros de rede: o fetch só rejeita a Promise em falhas de rede (ex.: sem internet). Use try/catch para capturar.

Outra forma de resolver

Usar .then() e .catch() em vez de async/await:

function buscarUsuario(id) {
  fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    .then(resposta => {
      if (!resposta.ok) throw new Error(`Erro HTTP: ${resposta.status}`);
      return resposta.json();
    })
    .then(usuario => {
      console.log(`Nome: ${usuario.name}`);
      console.log(`Email: ${usuario.email}`);
    })
    .catch(erro => console.error('Falha na requisição:', erro.message));
}

Essa forma é preferível quando você quer evitar async/await ou está em um ambiente que não suporta.

Saída esperada

Nome: Leanne Graham
Email: Sincere@april.biz