Sobes.tech
Junior

Que ferramentas utiliza para interagir com o servidor?

sobes.tech IA

Resposta da IA

  • XMLHttpRequest (XHR):

    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/data', true); // Configuração da requisição
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 400) {
        const data = JSON.parse(xhr.responseText); // Processamento de resposta bem-sucedida
        console.log(data);
      } else {
        // Tratamento de erros
        console.error('Erro na requisição:', xhr.status);
      }
    };
    xhr.onerror = function() {
      // Tratamento de erros de rede
      console.error('Erro de rede');
    };
    xhr.send(); // Envio da requisição
    
  • Fetch API:

    fetch('/api/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Status HTTP ' + response.status); // Tratamento de erros HTTP
        }
        return response.json(); // Análise JSON
      })
      .then(data => {
        console.log(data); // Processamento de dados
      })
      .catch(error => {
        console.error('Erro na requisição:', error); // Tratamento de outros erros
      });
    
  • Bibliotecas baseadas em Fetch ou XHR:

    • Axios:
      // Instalação do Axios: npm install axios
      
      import axios from 'axios';
      
      axios.get('/api/data')
        .then(response => {
          console.log(response.data); // Acesso aos dados via .data
        })
        .catch(error => {
          console.error('Erro na requisição:', error); // Tratamento de erros
        });
      
    • jQuery.ajax: (Se estiver usando jQuery)
      // Requer a biblioteca jQuery
      
      $.ajax({
        url: '/api/data',
        method: 'GET',
        dataType: 'json', // Tipo de dado esperado
        success: function(data) {
          console.log(data); // Processamento de resposta bem-sucedida
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.error('Erro na requisição:', textStatus, errorThrown); // Tratamento de erros
        }
      });
      
  • WebSockets: Para comunicação bidirecional em tempo real.

    const socket = new WebSocket('ws://localhost:8080'); // Conexão ao servidor WebSocket
    
    socket.onopen = function(event) {
      console.log('WebSocket conectado'); // Evento de conexão
      socket.send('Olá do cliente!'); // Envio de mensagem
    };
    
    socket.onmessage = function(event) {
      console.log('Mensagem recebida do servidor:', event.data); // Recebimento de mensagem
    };
    
    socket.onerror = function(event) {
      console.error('Erro WebSocket:', event); // Evento de erro
    };
    
    socket.onclose = function(event) {
      if (event.wasClean) {
        console.log('Conexão fechada limpidamente, código=' + event.code + ' motivo=' + event.reason);
      } else {
        console.error('Conexão interrompida'); // Por exemplo, o processo do servidor foi morto
      }
    };
    
    // Fechar conexão
    // socket.close();