O que é e Como Utilizar Fetch API com JavaScript

A Fetch API é uma interface moderna que permite fazer requisições HTTP no navegador de forma simples e eficiente. Se você é iniciante em desenvolvimento web, entender como usar a Fetch API pode ser um grande diferencial para criar aplicações que interagem com servidores e APIs. Neste artigo, vamos explorar o básico da Fetch API e mostrar como utilizá-la com exemplos práticos.

O que é a Fetch API?

A Fetch API é uma funcionalidade nativa do JavaScript que facilita a realização de requisições HTTP. Diferente do antigo XMLHttpRequest, a Fetch API é baseada em Promises, o que torna o código mais limpo e fácil de entender.

Como Fazer uma Requisição Simples

Para fazer uma requisição HTTP simples, você usa a função fetch(), passando a URL do recurso que deseja acessar. Veja um exemplo básico de uma requisição GET:

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

Neste exemplo, a função fetch() faz a requisição à URL fornecida. Quando a resposta chega, o método json() é chamado para converter a resposta em um objeto JavaScript. Se ocorrer um erro, ele será capturado e exibido no console.

Enviando Dados com uma Requisição POST

Para enviar dados a um servidor, você pode usar uma requisição POST. Aqui está um exemplo de como enviar um objeto JSON:

fetch('https://api.exemplo.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    nome: 'Ana',
    idade: 28
  })
})
.then(response => response.json())
.then(data => {
  console.log('Sucesso:', data);
})
.catch(error => {
  console.error('Erro:', error);
});

Neste exemplo, a função fetch() envia uma requisição POST com um corpo JSON. As opções method, headers e body são usadas para configurar a requisição.

Tratando Erros

Tratar erros é crucial ao trabalhar com a Fetch API. Você pode usar o método catch() para capturar erros, mas também é importante verificar o status da resposta:

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

Aqui, verificamos se response.ok é falso antes de processar a resposta, garantindo que erros sejam capturados adequadamente.

Usando Async/Await

O uso de async e await pode tornar o código mais legível e fácil de escrever. Veja como reescrever o exemplo anterior usando essa abordagem:

async function fetchData() {
  try {
    let response = await fetch('https://api.exemplo.com/dados');
    if (!response.ok) {
      throw new Error('Erro na requisição: ' + response.status);
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Erro:', error);
  }
}

fetchData();

A palavra-chave async define uma função assíncrona e await pausa a execução da função até que a Promise seja resolvida.

Conclusão

A Fetch API é uma ferramenta poderosa para fazer requisições HTTP em JavaScript. Com uma sintaxe simples e o uso de Promises, ela facilita a interação com servidores e APIs. Esperamos que este guia tenha ajudado você a entender o básico da Fetch API e como utilizá-la em seus projetos. Continue explorando mais artigos como este em nosso blog para aprimorar suas habilidades de desenvolvimento web.