Aké nástroje používate na interakciu so serverom…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Nastavenie požiadavky
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Spracovanie úspešnej odpovede
    console.log(data);
  } else {
    // Spracovanie chýb
    console.error('Chyba pri požiadavke:', xhr.status);
  }
};
xhr.onerror = function() {
  // Spracovanie sieťových chýb
  console.error('Sieťová chyba');
};
xhr.send(); // Odoslanie požiadavky

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP status ' + response.status); // Spracovanie HTTP chýb
    }
    return response.json(); // Parsovanie JSON
  })
  .then(data => {
    console.log(data); // Spracovanie dát
  })
  .catch(error => {
    console.error('Chyba pri požiadavke:', error); // Spracovanie ďalších chýb
  });

Knihovny založené na Fetch alebo XHR:

Axios:

// Inštalácia Axios: npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // Prístup k dátam cez .data
  })
  .catch(error => {
    console.error('Chyba pri požiadavke:', error); // Spracovanie chýb
  });

jQuery.ajax: (Ak sa používa jQuery)

// Vyžaduje knižnicu jQuery

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Očakávaný typ dát
  success: function(data) {
    console.log(data); // Spracovanie úspešnej odpovede
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Chyba pri požiadavke:', textStatus, errorThrown); // Spracovanie chýb
  }
});

WebSockety: Pre obojsmernú komunikáciu v reálnom čase.

const socket = new WebSocket('ws://localhost:8080'); // Pripojenie k WebSocket serveru

socket.onopen = function(event) {
  console.log('WebSocket pripojený'); // Udalosť pripojenia
  socket.send('Ahoj od klienta!'); // Odoslanie správy
};

socket.onmessage = function(event) {
  console.log('Prijatá správa od servera:', event.data); // Prijatie správy
};

socket.onerror = function(event) {
  console.error('Chyba WebSocket:', event); // Udalosť chyby
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Čisté zatvorenie, kód=' + event.code + ' dôvod=' + event.reason);
  } else {
    console.error('Pripojenie bolo prerušené'); // Napríklad, ak bol proces serveru ukončený
  }
};

// Zatvorenie spojenia
// socket.close();

Voľba nástroja závisí od požiadaviek projektu, potreby práce s promise, pohodlia pri spracovaní požiadaviek a dostupnosti ďalších funkcií (prepínače, zrušenie požiadaviek Axios atď.). Fetch API je moderný štandard pre asynchrónne požiadavky, zatiaľ čo Axios je mocná knižnica poskytujúca ďalšie možnosti. XHR sa používa zriedkavejšie v nových projektoch, ale je dôležitý pre pochopenie základov. WebSockety sú nenahraditeľné pre interaktívne aplikácie s výmenou dát v reálnom čase.

Aké nástroje používate na interakciu so serverom?