Jaké nástroje používáte k interakci se serverem…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Nastavení požadavku
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Zpracování úspěšné odpovědi
    console.log(data);
  } else {
    // Zpracování chyb
    console.error('Chyba při požadavku:', xhr.status);
  }
};
xhr.onerror = function() {
  // Zpracování síťových chyb
  console.error('Síťová chyba');
};
xhr.send(); // Odeslání požadavku

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP status ' + response.status); // Zpracování HTTP chyb
    }
    return response.json(); // Parsování JSON
  })
  .then(data => {
    console.log(data); // Zpracování dat
  })
  .catch(error => {
    console.error('Chyba při požadavku:', error); // Zpracování dalších chyb
  });

Knihovny založené na Fetch nebo XHR:

Axios:

// Instalace Axios: npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // Přístup k datům přes .data
  })
  .catch(error => {
    console.error('Chyba při požadavku:', error); // Zpracování chyb
  });

jQuery.ajax: (Pokud se používá jQuery)

// Vyžaduje knihovnu jQuery

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Očekávaný typ dat
  success: function(data) {
    console.log(data); // Zpracování úspěšné odpovědi
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Chyba při požadavku:', textStatus, errorThrown); // Zpracování chyb
  }
});

WebSockety: Pro obousměrnou komunikaci v reálném čase.

const socket = new WebSocket('ws://localhost:8080'); // Připojení ke WebSocket serveru

socket.onopen = function(event) {
  console.log('WebSocket připojen'); // Událost připojení
  socket.send('Ahoj od klienta!'); // Odeslání zprávy
};

socket.onmessage = function(event) {
  console.log('Obdrženo zpráva od serveru:', event.data); // Přijetí zprávy
};

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

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Čisté uzavření, kód=' + event.code + ' důvod=' + event.reason);
  } else {
    console.error('Spojení bylo přerušeno'); // Například, pokud byl proces serveru ukončen
  }
};

// Uzavření spojení
// socket.close();

Volba nástroje závisí na požadavcích projektu, potřebě práce s promise, pohodlí při zpracování požadavků a dostupnosti dalších funkcí (přepínače, zrušení požadavků Axios atd.). Fetch API je moderní standard pro asynchronní požadavky, zatímco Axios je mocná knihovna poskytující další možnosti. XHR se v nových projektech používá méně, ale je důležitý pro pochopení základů. WebSockets jsou nenahraditelné pro interaktivní aplikace s výměnou dat v reálném čase.

Jaké nástroje používáte k interakci se serverem?