Lidando com erros no fetch API em JavaScript

Como lidar com erros no fetch?

O fetch API em JavaScript é uma poderosa ferramenta para fazer requisições HTTP. No entanto, como qualquer outro recurso assíncrono, ele pode gerar erros, seja devido a falhas na rede, status de erro da API ou problemas com a conversão dos dados. Por isso, é importante saber como capturar e tratar esses erros para garantir que seu código seja robusto e resiliente.

Erros de rede com fetch

Quando você usa o fetch para fazer uma requisição, podem ocorrer falhas de rede, como problemas de conexão com a internet ou indisponibilidade do servidor. Por padrão, o fetch não rejeita uma Promise se o status da resposta for um erro HTTP, como 404 ou 500. Ele só rejeita a Promise se houver um erro de rede.

Exemplo de erro de rede:

fetch('https://api.exemplo.com/dados')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Erro de rede ou de requisição:', error));

Aqui, qualquer falha de rede ou erro ao fazer a requisição será capturado pelo catch() e uma mensagem de erro será impressa.

Verificando o status da resposta

Embora o fetch não rejeite a Promise em caso de erros de status HTTP (como 404 ou 500), você pode verificar o status da resposta manualmente e lançar um erro se o status não for o esperado. Para isso, você pode usar a propriedade response.ok, que será true se o status da resposta for entre 200 e 299 (indicado como sucesso).

Exemplo de verificação de status de resposta:

fetch('https://api.exemplo.com/dados')
  .then(response => {
    if (!response.ok) {
      throw new Error('Erro na resposta da API: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log('Erro:', error));

Neste exemplo, se a resposta tiver um status de erro (como 404 ou 500), será lançado um erro com o status da resposta, que será tratado pelo catch().

Erros de conversão de dados

Outro tipo de erro que pode ocorrer ao usar fetch é quando você tenta converter a resposta para JSON, mas a resposta não está no formato esperado. Isso pode acontecer, por exemplo, se o servidor retornar dados não JSON ou um erro inesperado no formato de dados.

Exemplo de erro ao tentar converter a resposta para JSON:

fetch('https://api.exemplo.com/dados')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Erro ao processar a resposta:', error));

Se a resposta não for um JSON válido, o método .json() gerará um erro e ele será capturado no catch().

Como lidar com erros em múltiplas requisições

Ao trabalhar com várias requisições assíncronas, você pode querer lidar com erros em todas as requisições de forma centralizada. Você pode usar Promise.all() para esperar que todas as Promises sejam resolvidas, e em caso de erro, o catch() captura a falha.

Exemplo de tratamento de erros em múltiplas requisições:

let fetch1 = fetch('https://api.exemplo1.com/dados');
let fetch2 = fetch('https://api.exemplo2.com/dados');

Promise.all([fetch1, fetch2])
  .then(responses => Promise.all(responses.map(response => response.json())))
  .then(data => console.log(data))
  .catch(error => console.log('Erro nas requisições:', error));

Se qualquer uma das requisições falhar, o erro será capturado e tratado no catch().

Usando try/catch com async/await

Quando você usa async/await, o tratamento de erros se torna mais intuitivo, pois você pode usar o bloco try/catch para capturar e tratar erros de uma maneira que se assemelha ao código síncrono. Isso facilita a leitura do código e a depuração.

Exemplo de como usar try/catch com fetch e async/await:

async function obterDados() {
  try {
    let resposta = await fetch('https://api.exemplo.com/dados');
    if (!resposta.ok) {
      throw new Error('Erro na resposta da API');
    }
    let dados = await resposta.json();
    console.log(dados);
  } catch (error) {
    console.log('Erro ao obter dados:', error);
  }
}

obterDados();

Neste exemplo, usamos async/await e envolvemos o código em um bloco try/catch para capturar e tratar qualquer erro que possa ocorrer durante a requisição ou a conversão da resposta.

Conclusão

Lidar com erros ao fazer requisições com o fetch é essencial para garantir que seu código funcione de forma robusta, mesmo em situações inesperadas. Usando catch(), verificando o status da resposta e utilizando try/catch com async/await, você pode escrever código mais seguro e capaz de lidar com falhas de rede, erros de status e problemas na conversão de dados de forma eficaz.

Como escrever código resiliente com fetch e tratar erros de forma eficiente

O tratamento de erros ao usar o fetch é fundamental para garantir que seu código não quebre quando ocorrem falhas inesperadas, como problemas de rede ou respostas de erro da API. Ao combinar catch(), verificação de status e try/catch, você pode criar um código resiliente que lida adequadamente com falhas e mantém a estabilidade da aplicação.

Algumas aplicações:

• Usar catch() para capturar erros de rede ou falhas na requisição.
• Verificar o status da resposta com response.ok para garantir que a requisição foi bem-sucedida.
• Utilizar try/catch com async/await para tornar o tratamento de erros mais intuitivo e legível.
• Tratar erros em múltiplas requisições com Promise.all() para garantir que todos os erros sejam capturados e tratados corretamente.

Dicas para quem está começando

• Ao começar a trabalhar com o fetch, sempre verifique o status da resposta e trate os erros com catch().
• Pratique o uso de try/catch quando estiver trabalhando com async/await para lidar com erros de forma mais eficiente.
• Se você estiver fazendo várias requisições, use Promise.all() e trate os erros de forma centralizada.
• Lembre-se de que a verificação do status da resposta é importante para capturar erros HTTP, como 404 ou 500.

Compartilhe este tutorial