Introdução (3 min)

Imagine que você está em um restaurante. Você (seu navegador) quer pedir um prato (dados) específico do cardápio (API). A Fetch API é a garçonete que leva seu pedido para a cozinha (servidor) e retorna com a sua comida (os dados solicitados).

Dominar a Fetch API é essencial para construir aplicações web modernas e interativas. Ela viabiliza a comunicação assíncrona com servidores, permitindo atualizar partes da página sem recarregá-la completamente.

Nesta aula, você aprenderá os fundamentos da Fetch API, desde conceitos básicos até a implementação prática com exemplos concretos, incluindo tratamento de erros e melhores práticas. Veremos como usar a Fetch API em um ambiente Node.js/Express, adaptando-a perfeitamente ao seu plano de hospedagem HostGator M.

Conceito Fundamental (7 min)

A Fetch API fornece uma interface JavaScript para acessar e manipular recursos da web, principalmente através de requisições HTTP. Ela permite buscar dados de APIs, enviar informações para o servidor e muito mais.

Usamos verbos HTTP como GET (para obter dados), POST (para enviar dados), PUT (para atualizar dados), e DELETE (para remover dados) para interagir com os recursos do servidor.

Casos de uso comuns incluem:

• Carregar dados dinamicamente em um site de notícias.
• Atualizar o feed de uma rede social sem recarregar a página.
• Construir um aplicativo de chat em tempo real.

A Fetch API se integra perfeitamente com tecnologias como JSON (para formatação de dados) e Promises (para lidar com operações assíncronas).

Vantagens: Simplicidade, suporte nativo em navegadores modernos, baseado em Promises.

Desvantagens: Pode exigir polyfills para navegadores antigos, gerenciamento manual de alguns tipos de erros.

Implementação Prática (10 min)

Vamos construir um exemplo prático consumindo a API pública do JSONPlaceholder (https://jsonplaceholder.typicode.com/). Este exemplo é totalmente compatível com o plano HostGator M.

// Busca posts da API
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    // Verifica se a resposta é válida
    if (!response.ok) {
      throw new Error(Erro HTTP! Status: ${response.status});
    }
    // Converte a resposta para JSON
    return response.json();
  })
  .then(data => {
    // Manipula os dados recebidos
    console.log('Dados recebidos:', data);
    // Exibe os títulos dos posts na página (exemplo)
    const postList = document.getElementById('post-list'); // Assumindo um elemento com id 'post-list' no HTML
    if (postList) {
        data.forEach(post => {
            const listItem = document.createElement('li');
            listItem.textContent = post.title;
            postList.appendChild(listItem);
        });
    }

  })
  .catch(error => {
    // Trata erros
    console.error('Erro na requisição:', error);
    // Exibe mensagem de erro na página (exemplo)
    const errorContainer = document.getElementById('error-container'); // Assumindo um elemento com id 'error-container' no HTML
    if (errorContainer){
        errorContainer.textContent = 'Erro ao carregar os posts.';
    }
  });
// Exemplo de POST (enviar dados) - Adapte conforme sua API
// const newData = { title: 'Novo Post', body: 'Conteúdo do post', userId: 1 };
// fetch('https://jsonplaceholder.typicode.com/posts', {
//   method: 'POST',
//   headers: { 'Content-Type': 'application/json' },
//   body: JSON.stringify(newData)
// })
// .then(response => response.json())
// .then(data => console.log('Post criado:', data))
// .catch(error => console.error('Erro ao criar post:', error));

Este código demonstra como fazer uma requisição GET e um exemplo comentado de POST. Adapte o código de POST conforme sua API e dados.

Exercício Hands-On (5 min)

Desafio: Modifique o código acima para consumir a API https://jsonplaceholder.typicode.com/users e exibir o nome de cada usuário em uma lista na página. Crie os elementos HTML necessários (ul com id user-list e div com id error-container para mensagens de erro).

Solução: Adapte o bloco .then(data => ...) para iterar sobre os dados de users e exibir o nome de cada usuário.

Teste: Abra o arquivo HTML no seu navegador. Você deverá ver a lista de nomes de usuários. Inspecione o console do navegador para verificar se há erros.

Troubleshooting: Se houver erros, verifique a URL da API, a estrutura dos dados retornados e o código JavaScript. Certifique-se de que os elementos HTML com os IDs corretos estejam presentes.

Próximos passos: Explore outros verbos HTTP (PUT, DELETE) e pratique com APIs mais complexas. Aprenda sobre Async/Await para simplificar o código assíncrono.