Ce instrumente folosiți pentru a interacționa cu…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Configurarea solicitării
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Procesarea răspunsului de succes
    console.log(data);
  } else {
    // Tratarea erorilor
    console.error('Eroare la solicitare:', xhr.status);
  }
};
xhr.onerror = function() {
  // Tratarea erorilor de rețea
  console.error('Eroare de rețea');
};
xhr.send(); // Trimiterea solicitării

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Stare HTTP ' + response.status); // Tratarea erorilor HTTP
    }
    return response.json(); // Parsarea JSON
  })
  .then(data => {
    console.log(data); // Procesarea datelor
  })
  .catch(error => {
    console.error('Eroare la solicitare:', error); // Tratarea altor erori
  });

Biblioteci bazate pe Fetch sau XHR:

Axios:

// Instalare Axios: npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // Acces la date prin .data
  })
  .catch(error => {
    console.error('Eroare la solicitare:', error); // Tratarea erorilor
  });

jQuery.ajax: (Dacă se folosește jQuery)

// Este necesară biblioteca jQuery

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Tipul de date așteptat
  success: function(data) {
    console.log(data); // Procesarea răspunsului de succes
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Eroare la solicitare:', textStatus, errorThrown); // Tratarea erorilor
  }
});

WebSockets: Pentru comunicare bidirecțională în timp real.

const socket = new WebSocket('ws://localhost:8080'); // Conectare la serverul WebSocket

socket.onopen = function(event) {
  console.log('WebSocket conectat'); // Eveniment de conectare
  socket.send('Salut din client!'); // Trimiterea mesajului
};

socket.onmessage = function(event) {
  console.log('Mesaj primit de la server:', event.data); // Primirea mesajului
};

socket.onerror = function(event) {
  console.error('Eroare WebSocket:', event); // Eveniment de eroare
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Conexiune închisă curat, cod=' + event.code + ' motiv=' + event.reason);
  } else {
    console.error('Conexiune întreruptă'); // De exemplu, procesul serverului a fost ucis
  }
};

// Închiderea conexiunii
// socket.close();

Ce instrumente folosiți pentru a interacționa cu serverul?