Kokius įrankius naudojate sąveikai su serveriu…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Užklausos nustatymas
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Sėkmingo atsakymo apdorojimas
    console.log(data);
  } else {
    // Klaidų apdorojimas
    console.error('Klaida užklausoje:', xhr.status);
  }
};
xhr.onerror = function() {
  // Tinklo klaidų apdorojimas
  console.error('Tinklo klaida');
};
xhr.send(); // Užklausos siuntimas

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP statusas ' + response.status); // HTTP klaidų apdorojimas
    }
    return response.json(); // JSON analizė
  })
  .then(data => {
    console.log(data); // Duomenų apdorojimas
  })
  .catch(error => {
    console.error('Klaida užklausoje:', error); // Kitos klaidos
  });

Bibliotekos, pagrįstos Fetch arba XHR:

Axios:

// Axios įdiegimas: npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // Prieiga prie duomenų per .data
  })
  .catch(error => {
    console.error('Klaida užklausoje:', error); // Klaidos apdorojimas
  });

jQuery.ajax: (Jei naudojama jQuery)

// Reikalinga jQuery biblioteka

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Laukiamas duomenų tipas
  success: function(data) {
    console.log(data); // Sėkmingo atsakymo apdorojimas
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Klaida užklausoje:', textStatus, errorThrown); // Klaidos apdorojimas
  }
});

WebSockets: Dviejų krypčių ryšys realiu laiku.

const socket = new WebSocket('ws://localhost:8080'); // Prisijungimas prie WebSocket serverio

socket.onopen = function(event) {
  console.log('WebSocket prijungtas'); // Prisijungimo įvykis
  socket.send('Sveiki nuo kliento!'); // Žinutės siuntimas
};

socket.onmessage = function(event) {
  console.log('Gauta žinutė iš serverio:', event.data); // Žinutės gavimas
};

socket.onerror = function(event) {
  console.error('WebSocket klaida:', event); // Klaidos įvykis
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Švarus uždarymas, kodas=' + event.code + ' priežastis=' + event.reason);
  } else {
    console.error('Ryšys nutrauktas'); // Pavyzdžiui, serverio procesas buvo nutrauktas
  }
};

// Uždaryti ryšį
// socket.close();

Pasirinkimas priklauso nuo projekto reikalavimų, poreikio dirbti su pažadais, patogumo apdorojant užklausas ir papildomų funkcijų (perėmėjai, užklausų atšaukimas Axios ir kt.). Fetch API yra šiuolaikinis standartas asinchroniniams užklausoms, o Axios – galinga biblioteka, siūlanti papildomas galimybes. XHR naudojamas rečiau naujuose projektuose, bet svarbus pagrindų supratimui. WebSockets nepakeičiami interaktyvioms programoms, kuriose reikalinga duomenų mainų realiu laiku.

Kokius įrankius naudojate sąveikai su serveriu?