Welche Tools verwenden Sie, um mit dem Server zu…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Anforderungskonfiguration
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Erfolgreiche Antwortverarbeitung
    console.log(data);
  } else {
    // Fehlerbehandlung
    console.error('Fehler bei der Anfrage:', xhr.status);
  }
};
xhr.onerror = function() {
  // Netzwerkfehlerbehandlung
  console.error('Netzwerkfehler');
};
xhr.send(); // Anfrage senden

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP-Status ' + response.status); // HTTP-Fehlerbehandlung
    }
    return response.json(); // JSON-Parsing
  })
  .then(data => {
    console.log(data); // Datenverarbeitung
  })
  .catch(error => {
    console.error('Fehler bei der Anfrage:', error); // Andere Fehlerbehandlung
  });

Bibliotheken basierend auf Fetch oder XHR:

Axios:

// Axios installieren: npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // Zugriff auf Daten über .data
  })
  .catch(error => {
    console.error('Fehler bei der Anfrage:', error); // Fehlerbehandlung
  });

jQuery.ajax: (Wenn jQuery verwendet wird)

// jQuery-Bibliothek erforderlich

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Erwarteter Datentyp
  success: function(data) {
    console.log(data); // Erfolgreiche Antwortverarbeitung
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Fehler bei der Anfrage:', textStatus, errorThrown); // Fehlerbehandlung
  }
});

WebSockets: Für bidirektionale Kommunikation in Echtzeit.

const socket = new WebSocket('ws://localhost:8080'); // Verbindung zum WebSocket-Server

socket.onopen = function(event) {
  console.log('WebSocket verbunden'); // Verbindungsereignis
  socket.send('Hallo vom Client!'); // Nachricht senden
};

socket.onmessage = function(event) {
  console.log('Nachricht vom Server empfangen:', event.data); // Nachricht empfangen
};

socket.onerror = function(event) {
  console.error('WebSocket-Fehler:', event); // Fehlerereignis
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Verbindung sauber geschlossen, Code=' + event.code + ' Grund=' + event.reason);
  } else {
    console.error('Verbindung unterbrochen'); // Zum Beispiel, Serverprozess wurde beendet
  }
};

// Verbindung schließen
// socket.close();

Welche Tools verwenden Sie, um mit dem Server zu interagieren?