Convertendo a resposta do fetch para JSON em JavaScript

Como converter a resposta do fetch para JSON?

Quando você faz requisições HTTP com o fetch em JavaScript, o formato da resposta pode variar dependendo do tipo de conteúdo que o servidor retorna. Um dos formatos mais comuns é o JSON, que é amplamente utilizado por APIs para enviar dados. Neste tutorial, vamos aprender como usar o fetch para obter uma resposta e convertê-la para JSON, tornando os dados manipuláveis em seu código.

O método .json()

O fetch API retorna uma resposta de rede que é uma instância da classe Response. Para converter a resposta em JSON, você precisa chamar o método .json() dessa resposta. Este método retorna uma Promise, que resolve o conteúdo da resposta no formato JSON.

Exemplo básico de como 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 converter resposta para JSON:', error));

Neste exemplo, o fetch faz uma requisição GET para o URL especificado. O método .json() é chamado na resposta da requisição, convertendo-a para um objeto JavaScript. Depois, o objeto é impresso no console. Se houver um erro durante a requisição ou a conversão, o erro será capturado no catch().

Lidando com respostas de diferentes tipos

Embora o JSON seja o formato mais comum, o fetch pode retornar respostas de diferentes tipos, como texto (text()), blob (blob()), ou até mesmo imagens. É importante saber como lidar com esses diferentes tipos de resposta, especialmente quando você está esperando JSON.

Exemplo de como verificar se a resposta é JSON:

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

Aqui, antes de chamar .json(), verificamos se a resposta foi bem-sucedida com a propriedade response.ok. Caso contrário, um erro é gerado e tratado.

Como lidar com erros ao converter JSON?

Quando você converte uma resposta em JSON, podem ocorrer erros caso o corpo da resposta não seja um JSON válido. É importante capturar esses erros para evitar que o código quebre inesperadamente.

Exemplo de como tratar erros ao converter para JSON:

fetch('https://api.exemplo.com/dados')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Erro ao converter para JSON:', error);
  });

Se o conteúdo da resposta não for um JSON válido, o response.json() vai lançar um erro que pode ser capturado pelo catch(), onde você pode tomar as medidas apropriadas.

Convertendo uma resposta JSON para outro formato

Às vezes, você pode querer converter a resposta JSON para outro formato, como texto ou XML. O fetch fornece métodos como .text() e .blob() para essas finalidades. Aqui, vamos mostrar como usar o .text() para obter a resposta como uma string.

Exemplo de como usar .text():

fetch('https://api.exemplo.com/dados')
  .then(response => response.text())
  .then(text => {
    console.log(text);
  })
  .catch(error => console.log('Erro ao obter texto:', error));

Neste exemplo, a resposta é obtida como uma string de texto em vez de um objeto JSON. Isso pode ser útil quando você está trabalhando com APIs que retornam texto puro.

Conclusão

O método .json() do fetch é a maneira mais simples e comum de converter uma resposta HTTP em JSON em JavaScript. Ao usar esse método, você pode facilmente trabalhar com dados retornados de APIs e outros serviços que enviam informações no formato JSON. Lembre-se de sempre verificar a resposta e capturar erros de conversão para garantir que seu código seja robusto e seguro.

Como garantir que a resposta do fetch seja convertida corretamente para JSON

Converter a resposta de uma requisição HTTP para JSON com fetch é uma tarefa comum quando se trabalha com APIs que retornam dados estruturados. O método .json() é eficiente e simples, tornando a manipulação de dados assíncronos mais acessível e organizada. Além disso, ao combinar com outras técnicas de verificação de erro, você pode garantir que seu código seja seguro e fácil de manter.

Algumas aplicações:

• Fazer requisições GET para APIs que retornam dados em JSON.
• Tratar dados de resposta de APIs RESTful em seu código JavaScript.
• Verificar a integridade e validade dos dados JSON antes de usá-los em seu aplicativo.
• Substituir a abordagem antiga de XMLHttpRequest por uma solução mais moderna e legível usando fetch.

Dicas para quem está começando

• Quando estiver começando, sempre verifique se a resposta da API é válida antes de tentar convertê-la com .json().
• Pratique o uso de .json() em requisições simples para entender como ele funciona com diferentes tipos de resposta.
• Se a resposta não for um JSON válido, o .json() lançará um erro, então esteja preparado para capturá-lo com catch().
• Use response.ok para verificar se a requisição foi bem-sucedida antes de tentar manipular os dados.

Compartilhe este tutorial