DEV Community

Cover image for Entendo Fetch de uma vez por todas.
FoodieHoodie
FoodieHoodie

Posted on

Entendo Fetch de uma vez por todas.

#webdev #javascript #development #programming

Entender como o fetch lida com sucessos e erros é muito interessante e é de uma forma bem diferente do que estamos acostumados com o AXIOS.

Ele só considera erro de rede (falha de conexão) como uma rejeição da Promise, o resto é tudo sucesso, afinal bateu no servidor, entregou a mensagem, porém o servidor pode não ter conseguido processar algo. Algo muito parecido com o que o GraphQl faz.

Bom vamos ao guia definitivo de como interpretar os retornos do fetch:

1. O Sucesso (A Promise resolve)

Diferente de bibliotecas como o Axios, o fetch resolve a Promise mesmo se o servidor retornar um erro HTTP (como 404 ou 500). Para o navegador, se o servidor respondeu, o "transporte" da mensagem tudo deu certo.

O Objeto Response

Quando a Promise resolve, ela entrega um objeto Response. Os principais campos para validar o sucesso são:

  • response.ok: Um booleano que é true se o status code estiver entre 200 e 299. É a forma mais simples de validar.
  • response.status: O número exato do status code (ex: 200, 201, 404).
  • response.statusText: A mensagem de status (ex: "OK" ou "Not Found").

2. O Erro de Lógica (Status HTTP de erro)

Se o servidor responder 404 (Não encontrado) ou 500 (Erro interno), o código cairá no bloco .then(), e não no .catch().

Para lidar com isso, você deve sempre verificar o ok:

fetch('https://api.exemplo.com/dados')
  .then(response => {
    if (!response.ok) {
      // Aqui você trata erros de permissão (401), não encontrado (404), etc.
      throw new Error(`Erro HTTP! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => {
    // Só chega aqui se a rede cair ou o 'throw' acima for disparado
    console.error("Houve um problema com a requisição:", error);
  });
Enter fullscreen mode Exit fullscreen mode

3. O Erro de Rede (A Promise rejeita)

O fetch só vai direto para o .catch() (rejeição) em cenários onde a requisição não pôde ser completada:

  • Queda de conexão/Internet: O usuário ficou offline.
  • Erro de DNS: O domínio não existe.
  • CORS: O servidor não permite que sua origem acesse os dados (erro de segurança).
  • Requisição abortada: Quando você usa um AbortController para cancelar a chamada.

Resumo Visual dos Retornos

Cenário Status HTTP response.ok Bloco Executado
Sucesso Total 200 - 299 true .then()
Erro do Cliente 400 - 499 false .then() (Requer validação manual)
Erro do Servidor 500 - 599 false .then() (Requer validação manual)
Erro de Rede/CORS Nenhum N/A .catch()

Top comments (0)