Fetch

fetch é uma API nativa do JavaScript que permite realizar requisições HTTP de forma simples e moderna. Ela é usada principalmente para buscar (ou "fetch") recursos de um servidor, como dados de uma API, arquivos ou outros tipos de conteúdo. O fetch retorna uma Promise, o que significa que ele trabalha de forma assíncrona, permitindo que o JavaScript continue a executar outras operações enquanto a requisição está em andamento.

Características principais do fetch:

  1. Simplicidade: Comparado ao antigo XMLHttpRequest, o fetch possui uma sintaxe muito mais fácil de usar.
  2. Promessas (Promises): O fetch retorna uma Promise, o que facilita o tratamento de operações assíncronas.
  3. Suporte a múltiplos métodos HTTP: Pode ser usado para diferentes tipos de requisições, como GET, POST, PUT, DELETE, etc.
  4. Configuração flexível: Permite configurar cabeçalhos, enviar dados no corpo da requisição, e muito mais.

Exemplo básico de uso do fetch:

fetch('https://api.exemplo.com/dados')
  .then(response => response.json())  // Converte a resposta para JSON
  .then(data => console.log(data))    // Exibe os dados no console
  .catch(error => console.error('Erro:', error));  // Lida com erros

Neste exemplo, o fetch faz uma requisição GET para a URL fornecida, processa a resposta como JSON, e lida com possíveis erros.

Um exemplo de como usar o fetch com a API do JSONPlaceholder, uma API pública para testes e prototipagem:

Exemplo de requisição GET

Neste exemplo, vamos buscar uma lista de posts da API usando o fetch.

// Fazendo uma requisição GET para obter posts da API JSONPlaceholder
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('Erro na requisição: ' + response.status);
    }
    return response.json();  // Converte a resposta para JSON
  })
  .then(posts => {
    console.log(posts);  // Exibe os posts no console
  })
  .catch(error => console.error('Erro:', error));  // Lida com erros

Exemplo de requisição POST

Neste exemplo, vamos enviar um novo post para a API com uma requisição POST.

// Enviando dados para criar um novo post
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'Meu novo post',
    body: 'Este é o conteúdo do post',
    userId: 1
  }),
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Erro na requisição: ' + response.status);
    }
    return response.json();  // Converte a resposta para JSON
  })
  .then(post => {
    console.log('Post criado:', post);  // Exibe o post criado
  })
  .catch(error => console.error('Erro:', error));  // Lida com erros

Explicação:

A API do JSONPlaceholder é ótima para testes rápidos e experimentação com fetch.