Você talvez não saiba tratar erros usando Fetch API corretamente

O Fetch API não é tão novo, e a maioria dos desenvolvedores já o utilizou em algum momento para obter recursos de um servidor. No entanto, será que você realmente sabe como lidar com erros ao usar essa API?

Dado o código abaixo, em que uma solicitação usando a Fetch API retorna um erro 404, qual seria a mensagem no console: sucesso ou falhou?

try {
  // este endpoint retornará 404
  const response = await fetch('https://restcountries.com/v4.1/all');
  console.log('Sucesso');
} catch {
  console.error('Falhou');
}

Se você assumir que este código registra a mensagem de falha quando ocorre um erro 404, eu diria que este artigo é definitivamente para você, porque sua resposta está incorreta. O console.log exibirá a mensagem sucesso, e vou explicar por quê e qual é a melhor maneira de lidar com erros usando a Fetch API.

O que é a Fetch API?
Em resumo, a Fetch API é uma interface para fazer facilmente solicitações HTTP assíncronas do tipo GET e POST para endpoints.

Como lidar com erros usando a Fetch API?
Ao usar a Fetch API, diferentes erros podem ocorrer, como: erro do servidor (500), erro não encontrado (404), erro de rede, erro CORS, entre outros. E temos abordagens diferentes para lidar com todos esses erros, como você verá abaixo.

Usando try/catch para lidar com erros da Fetch API:
Estou presumindo que você está familiarizado com promisses em JavaScript e sabe como elas funcionam (porque uma das razões pelas quais a Fetch API é tão popular é porque ela retorna uma promisse). Portanto, podemos usar o poder de then, catch e finally quando a fetch é resolvida, rejeitada e concluída.

Envolvendo a chamada fetch em um bloco try/catch é uma maneira muito comum de lidar com erros (veja o exemplo abaixo), mas nem todos os erros podem ser capturados, e explicarei isso logo após o código.

javascript
Copy code
try {
// este endpoint retornará um erro CORS
const response = await fetch('https://google.com/api');
} catch {
console.error('Falhou');
}
// Saída: Falhou
Este código tentará realizar uma busca e detectar erros apenas quando a promisse for rejeitada (o que pode ocorrer em dois cenários):

Erros de rede: falha ao conectar-se ao servidor, o que pode ser causado por vários motivos, como rede lenta e tempo limite, por exemplo.
Erros CORS: quando um domínio não está autorizado a obter recursos de um domínio diferente.
A Fetch retornará resolvido para erros de status do servidor (como 404 e 500, por exemplo), e é por isso que o catch não pode capturá-los no exemplo no início deste artigo.

Verificando o status da resposta para lidar com erros da Fetch API:
Outra maneira comum de lidar com erros usando a Fetch API é verificar o status da resposta quando a promisse é resolvida - e é assim que devemos obter o erro 404 no exemplo no início deste artigo:

// este endpoint retornará 404
const response = await fetch('https://restcountries.com/v4.1/all');

if (response.ok) {
  // ...faça algo com a resposta se response.ok for verdadeiro
} else {
  console.error('Falhou');
}

Aqui, usamos response.ok para verificar se a resposta foi bem-sucedida ou não (verdadeiro ou falso).

É verdadeiro quando o código de status está entre 200 e 299 (significa bem-sucedido).
É falso quando o servidor retorna qualquer outro status que não esteja acima. Exemplos são 404 (não encontrado) e 500 (erro interno do servidor).
Melhor maneira de lidar com erros usando a Fetch API:
Exemplo 01:
Como você viu acima, try/catch e response.ok são usados para capturar diferentes tipos de erros, então podemos combinar as duas abordagens para lidar melhor com erros usando a Fetch API. Veja o exemplo abaixo:

try {
  const response = await fetch('https://restcountries.com/v4.1/all');
  if (response.ok) {
    console.log('promisse resolvida e status HTTP é bem-sucedido');
    // ...faça algo com a resposta
  } else {
    console.error('promisse resolvida, mas status HTTP falhou');
  }
} catch {
  console.error('promisse rejeitada');
}

Explicação:

try/catch é usado para obter erros quando a promisse é rejeitada (problemas de rede ou CORS).
response.ok é usado para lidar com erros do servidor (404 ou 500, por exemplo) quando a promisse é resolvida.
Exemplo 02:
Outra maneira comum de lidar com erros dentro do bloco try é lançar um erro quando response.ok não é verdadeiro, para que o bloco catch seja executado e possamos lidar com todos os erros no mesmo lugar. Veja o exemplo abaixo para entender melhor:

try {
  const response = await fetch('https://restcountries.com/v4.1/all');

  if (response.ok) {
    console.log('promisse resolvida e status HTTP é bem-sucedido');
    // ...faça algo com a resposta
  } else {
    // Mensagem personalizada para códigos HTTP falhados
    if (response.status === 404) throw new Error('404, Não encontrado');
    if (response.status === 500) throw new Error('500, erro interno do servidor');
    // Para qualquer outro erro do servidor
    throw new Error(response.status);
  }
} catch (error) {
  console.error('Fetch', error);
  // Saída por exemplo: "Erro no Fetch: 404, Não encontrado"
}