Quels outils utilisez-vous pour interagir avec le…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Configuration de la requête
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Traitement de la réponse réussie
    console.log(data);
  } else {
    // Gestion des erreurs
    console.error('Erreur lors de la requête:', xhr.status);
  }
};
xhr.onerror = function() {
  // Gestion des erreurs réseau
  console.error('Erreur réseau');
};
xhr.send(); // Envoi de la requête

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Statut HTTP ' + response.status); // Gestion des erreurs HTTP
    }
    return response.json(); // Analyse JSON
  })
  .then(data => {
    console.log(data); // Traitement des données
  })
  .catch(error => {
    console.error('Erreur lors de la requête:', error); // Gestion d'autres erreurs
  });

Bibliothèques basées sur Fetch ou XHR:

Axios:

// Installation d'Axios : npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // Accès aux données via .data
  })
  .catch(error => {
    console.error('Erreur lors de la requête:', error); // Gestion des erreurs
  });

jQuery.ajax: (si jQuery est utilisé)

// Nécessite la bibliothèque jQuery

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Type de données attendu
  success: function(data) {
    console.log(data); // Traitement de la réponse réussie
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Erreur lors de la requête:', textStatus, errorThrown); // Gestion des erreurs
  }
});

WebSockets: Pour une communication bidirectionnelle en temps réel.

const socket = new WebSocket('ws://localhost:8080'); // Connexion au serveur WebSocket

socket.onopen = function(event) {
  console.log('WebSocket connecté'); // Événement de connexion
  socket.send('Bonjour du client!'); // Envoi d'un message
};

socket.onmessage = function(event) {
  console.log('Message reçu du serveur:', event.data); // Réception du message
};

socket.onerror = function(event) {
  console.error('Erreur WebSocket:', event); // Événement d'erreur
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Connexion fermée proprement, code=' + event.code + ' raison=' + event.reason);
  } else {
    console.error('Connexion interrompue'); // Par exemple, le processus du serveur a été tué
  }
};

// Fermeture de la connexion
// socket.close();

Quels outils utilisez-vous pour interagir avec le serveur?