Milyen eszközöket használ a szerverrel való…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', igaz); // Kérés beállítása
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Sikeres válasz feldolgozása
    console.log(data);
  } else {
    // Hibák kezelése
    console.error('Hiba a kérés során:', xhr.status);
  }
};
xhr.onerror = function() {
  // Hálózati hibák kezelése
  console.error('Hálózati hiba');
};
xhr.send(); // Kérés küldése

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP státusz ' + response.status); // HTTP hibák kezelése
    }
    return response.json(); // JSON elemzése
  })
  .then(data => {
    console.log(data); // Adatok feldolgozása
  })
  .catch(error => {
    console.error('Hiba a kérés során:', error); // Egyéb hibák kezelése
  });

Fetch vagy XHR alapú könyvtárak:

Axios:

// Axios telepítése: npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // Az adatok elérése .data segítségével
  })
  .catch(error => {
    console.error('Hiba a kérés során:', error); // Hibák kezelése
  });

jQuery.ajax: (Ha jQuery-t használnak)

// Jquery könyvtár szükséges

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Várt adat típus
  success: function(data) {
    console.log(data); // Sikeres válasz feldolgozása
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Hiba a kérés során:', textStatus, errorThrown); // Hibák kezelése
  }
});

WebSocket-ek: Kétirányú kommunikáció valós időben.

const socket = new WebSocket('ws://localhost:8080'); // Kapcsolódás WebSocket szerverhez

socket.onopen = function(event) {
  console.log('WebSocket kapcsolódva'); // Kapcsolódási esemény
  socket.send('Üdvözlet a klienstől!'); // Üzenet küldése
};

socket.onmessage = function(event) {
  console.log('Üzenet érkezett a szervertől:', event.data); // Üzenet fogadása
};

socket.onerror = function(event) {
  console.error('WebSocket hiba:', event); // Hiba esemény
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Tiszta zárás, kód=' + event.code + ' ok=' + event.reason);
  } else {
    console.error('Kapcsolat megszakadt'); // Például a szerver folyamatának leállítása
  }
};

// Kapcsolat lezárása
// socket.close();

A eszköz kiválasztása a projekt követelményeitől, a promise-kkel való munkától, a kérések kezelésének kényelmétől és a további funkcióktól (átjárók, kérés megszakítása Axios stb.) függ. A Fetch API a modern szabvány az aszinkron kérésekhez, az Axios pedig egy erőteljes könyvtár, amely további lehetőségeket kínál. Az XHR-t ritkábban használják új projektekben, de fontos az alapok megértéséhez. A WebSocket-ek elengedhetetlenek az interaktív alkalmazásokhoz, amelyek valós idejű adatcserét igényelnek.

Milyen eszközöket használ a szerverrel való kommunikációhoz?