Ποια εργαλεία χρησιμοποιείτε για να αλληλεπιδράσετε…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Ρύθμιση αιτήματος
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Επεξεργασία επιτυχούς απάντησης
    console.log(data);
  } else {
    // Επεξεργασία σφαλμάτων
    console.error('Σφάλμα κατά το αίτημα:', xhr.status);
  }
};
xhr.onerror = function() {
  // Επεξεργασία δικτυακών σφαλμάτων
  console.error('Δικτυακό σφάλμα');
};
xhr.send(); // Αποστολή αιτήματος

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Κατάσταση HTTP ' + response.status); // Επεξεργασία σφαλμάτων HTTP
    }
    return response.json(); // Ανάλυση JSON
  })
  .then(data => {
    console.log(data); // Επεξεργασία δεδομένων
  })
  .catch(error => {
    console.error('Σφάλμα κατά το αίτημα:', error); // Επεξεργασία άλλων σφαλμάτων
  });

Βιβλιοθήκες βασισμένες σε Fetch ή XHR:

Axios:

// Εγκατάσταση Axios: npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // Πρόσβαση στα δεδομένα μέσω .data
  })
  .catch(error => {
    console.error('Σφάλμα κατά το αίτημα:', error); // Επεξεργασία σφαλμάτων
  });

jQuery.ajax: (Εάν χρησιμοποιείται jQuery)

// Απαιτείται η βιβλιοθήκη jQuery

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Αναμενόμενος τύπος δεδομένων
  success: function(data) {
    console.log(data); // Επεξεργασία επιτυχούς απάντησης
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Σφάλμα κατά το αίτημα:', textStatus, errorThrown); // Επεξεργασία σφαλμάτων
  }
});

WebSockets: Για διπλής κατεύθυνσης επικοινωνία σε πραγματικό χρόνο.

const socket = new WebSocket('ws://localhost:8080'); // Σύνδεση με διακομιστή WebSocket

socket.onopen = function(event) {
  console.log('Το WebSocket είναι συνδεδεμένο'); // Συμβάν σύνδεσης
  socket.send('Γειά από τον πελάτη!'); // Αποστολή μηνύματος
};

socket.onmessage = function(event) {
  console.log('Λήφθηκε μήνυμα από τον διακομιστή:', event.data); // Λήψη μηνύματος
};

socket.onerror = function(event) {
  console.error('Σφάλμα WebSocket:', event); // Συμβάν σφάλματος
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Η σύνδεση έκλεισε καθαρά, κωδικός=' + event.code + ' λόγος=' + event.reason);
  } else {
    console.error('Η σύνδεση διακόπηκε'); // Για παράδειγμα, ο διακομιστής τερματίστηκε
  }
};

// Κλείσιμο σύνδεσης
// socket.close();

Η επιλογή του εργαλείου εξαρτάται από τις απαιτήσεις του έργου, την ανάγκη εργασίας με υποσχέσεις, την ευκολία επεξεργασίας αιτημάτων και τις πρόσθετες λειτουργίες (μεταφορείς, ακύρωση αιτημάτων Axios κ.λπ.). Το Fetch API αποτελεί το σύγχρονο πρότυπο για ασύγχρονα αιτήματα, ενώ το Axios είναι μια ισχυρή βιβλιοθήκη που παρέχει πρόσθετες δυνατότητες. Το XHR χρησιμοποιείται σπανιότερα σε νέα έργα, αλλά είναι σημαντικό για την κατανόηση των βασικών. Τα WebSockets είναι απαραίτητα για διαδραστικές εφαρμογές με ανταλλαγή δεδομένων σε πραγματικό χρόνο.

Ποια εργαλεία χρησιμοποιείτε για να αλληλεπιδράσετε με τον διακομιστή;