Usando a Fetch API em JavaScript: Um Guia Detalhado

Usando a Fetch API em JavaScript: Um Guia Detalhado

Introdução

A Fetch API é uma interface que permite fazer requisições HTTP de forma mais simples em JavaScript, sem precisar recorrer a bibliotecas de terceiros. Ela é uma alternativa à XMLHttpRequest (XHR), que é um objeto legado para a mesma finalidade. A Fetch API utiliza Promises para lidar com os resultados das requisições, o que torna seu uso muito mais fácil e intuitivo. Neste artigo, vamos explorar como utilizar a Fetch API para realizar requisições HTTP, usando os métodos GET, POST, PUT e DELETE.

Como usar a Fetch API 🔍

O primeiro passo para usar a Fetch API é criar uma instância do objeto `fetch` e passar como parâmetro a URL para a qual você quer enviar uma requisição. O método `fetch` retorna uma Promise que será resolvida com a resposta da requisição quando ela estiver completa. Veja o exemplo abaixo:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Nesse exemplo, estamos fazendo uma requisição GET para a URL `'https://jsonplaceholder.typicode.com/posts'`. Em seguida, usamos o método `json()` para extrair os dados da resposta, que são retornados como uma Promise. Por fim, exibimos os dados no console do navegador. Note que usamos o método `catch` para lidar com erros que possam ocorrer durante a requisição.

Métodos HTTP 🔍

Existem quatro métodos HTTP principais que podemos usar com a Fetch API: GET, POST, PUT e DELETE. Cada um deles é utilizado para realizar uma operação diferente sobre um recurso na web. A seguir, vamos explorar cada um desses métodos com exemplos práticos.

Método GET 🔍

O método GET é usado para buscar informações de um recurso na web. Ele é utilizado quando queremos apenas consultar informações sem modificá-las. Veja o exemplo abaixo:

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Nesse exemplo, estamos buscando informações do post com o id igual a 1. Como estamos usando o método GET, não precisamos enviar nenhum dado no corpo da requisição.

Método POST 🔍

O método POST é usado para enviar dados para um recurso na web. Ele é utilizado quando queremos criar um novo recurso ou atualizar um recurso existente. Veja o exemplo abaixo:

let post_data = {
  title: "foo",
  body: "bar",
  userId: 1
};

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify(post_data),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Nesse exemplo, estamos criando um novo post com o título "foo", corpo "bar" e userId igual a 1. Estamos usando o método POST para enviar esses dados para a URL `'https://jsonplaceholder.typicode.com/posts'`. Note que estamos enviando os dados no corpo da requisição usando o método `JSON.stringify`. Também estamos definindo o tipo de conteúdo da requisição como `'application/json; charset=UTF-8'` no cabeçalho da requisição, usando a propriedade `headers`.

Método PUT 🔍

O método PUT é usado para atualizar um recurso na web. Ele é utilizado quando queremos modificar informações de um recurso existente. Veja o exemplo abaixo:

let put_data = {
  id: 1,
  title: "foo",
  body: "bar",
  userId: 1
};

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify(put_data),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Nesse exemplo, estamos atualizando as informações do post com id igual a 1. Estamos usando o método PUT para enviar esses dados para a URL `'https://jsonplaceholder.typicode.com/posts/1'`. Note que estamos enviando os dados no corpo da requisição usando o método `JSON.stringify`. Também estamos definindo o tipo de conteúdo da requisição como `'application/json; charset=UTF-8'` no cabeçalho da requisição, usando a propriedade `headers`.

Método DELETE 🔍

O método DELETE é usado para excluir um recurso na web. Ele é utilizado quando queremos remover um recurso existente. Veja o exemplo abaixo:

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "DELETE",
})
.then(response => console.log(response.status))
.catch(error => console.error(error));

Nesse exemplo, estamos excluindo o post com id igual a 1. Estamos usando o método DELETE para enviar essa requisição para a URL `'https://jsonplaceholder.typicode.com/posts/1'`. Note que não precisamos enviar nenhum dado no corpo da requisição, pois estamos apenas removendo o recurso.

Headers

Os cabeçalhos HTTP são usados para transmitir informações adicionais entre o cliente e o servidor. Eles são usados para enviar informações sobre o tipo de conteúdo que está sendo enviado, autenticação do usuário, controle de cache, entre outros. Na Fetch API, os cabeçalhos podem ser especificados através do objeto `headers`. Veja o exemplo abaixo:

fetch("https://jsonplaceholder.typicode.com/posts", {
  headers: {
    "Authorization": "Bearer " + token,
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Nesse exemplo, estamos enviando um token de autorização no cabeçalho da requisição, usando a propriedade `Authorization`. Também estamos definindo o tipo de conteúdo da requisição como `'application/json; charset=UTF-8'` no cabeçalho da requisição, usando a propriedade `Content-type`.

Query Parameters 🔍

Os parâmetros de consulta (query parameters) são usados para enviar informações adicionais na URL da requisição. Eles são usados para enviar informações como filtros de pesquisa, ordenação, paginação, entre outros. Na Fetch API, os parâmetros de consulta podem ser especificados através da URL da requisição. Veja o exemplo abaixo:

fetch("https://jsonplaceholder.typicode.com/posts?userId=1")
.then(response => response.json ())
.then(data => console.log(data))
.catch(error => console.error(error));

Nesse exemplo, estamos buscando todos os posts do usuário com id igual a 1. Estamos adicionando o parâmetro de consulta `'userId=1'` na URL da requisição.

Tratando Erros 🔍

Ao fazer requisições HTTP, é importante tratar possíveis erros que possam ocorrer. Na Fetch API, podemos fazer isso usando o método `catch` da Promisse retornada pela função `fetch()`. Veja o exemplo abaixo:

fetch("https://jsonplaceholder.typicode.com/posts/999")
.then(response => {
  if (!response.ok) {
    throw new Error("HTTP error, status = " + response.status);
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));

Nesse exemplo, estamos tentando buscar o post com id igual a 999, que não existe na API. Quando tentamos buscar esse post, a API retorna um erro 404 (Not Found). Estamos tratando esse erro verificando se a resposta da API não foi bem-sucedida (usando a propriedade `ok` do objeto `response`). Caso a resposta não tenha sido bem-sucedida, estamos lançando um erro personalizado, informando o código de status retornado pela API. Esse erro é tratado no método `catch`, onde estamos imprimindo a mensagem de erro no console.

🔍 Async/Await:

A Fetch API pode ser usada juntamente com a sintaxe `async/await`. Isso torna o código mais legível e fácil de entender. Veja o exemplo abaixo:

async function fetchPosts() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchPosts();

Nesse exemplo, estamos definindo uma função assíncrona `fetchPosts()`, que faz uma requisição para a URL `'https://jsonplaceholder.typicode.com/posts'`. Estamos usando a palavra-chave `await` para aguardar a resposta da API e para converter a resposta em um objeto JavaScript. Caso ocorra algum erro, estamos tratando-o no bloco `catch` da função.

Conclusão 📚

Neste artigo, aprendemos como usar a Fetch API em JavaScript para fazer requisições HTTP. Vimos como usar os métodos GET, POST, PUT e DELETE, como enviar cabeçalhos e parâmetros de consulta, e como tratar erros. Também vimos como usar a sintaxe `async/await` para tornar o código mais legível e fácil de entender. Espero que este artigo tenha sido útil para você e que você possa aplicar esse conhecimento em seus projetos futuros.