Kādus rīkus izmantojat, lai sazinātos ar serveri…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Pieprasījuma iestatīšana
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Veiksmīgas atbildes apstrāde
    console.log(data);
  } else {
    // Kļūdu apstrāde
    console.error('Kļūda pieprasījumā:', xhr.status);
  }
};
xhr.onerror = function() {
  // Tīkla kļūdu apstrāde
  console.error('Tīkla kļūda');
};
xhr.send(); // Sūtīt pieprasījumu

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP statuss ' + response.status); // HTTP kļūdu apstrāde
    }
    return response.json(); // JSON parsēšana
  })
  .then(data => {
    console.log(data); // Datu apstrāde
  })
  .catch(error => {
    console.error('Kļūda pieprasījumā:', error); // Citu kļūdu apstrāde
  });

Fetch vai XHR balstītas bibliotēkas:

Axios:

// Uzstādīt Axios: npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // Pieejas dati caur .data
  })
  .catch(error => {
    console.error('Kļūda pieprasījumā:', error); // Kļūdu apstrāde
  });

jQuery.ajax: (Ja tiek izmantots jQuery)

// Nepieciešama jQuery bibliotēka

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Sagaidāmais datu tips
  success: function(data) {
    console.log(data); // Veiksmīgas atbildes apstrāde
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Kļūda pieprasījumā:', textStatus, errorThrown); // Kļūdu apstrāde
  }
});

WebSockets: Divvirzienu saziņai reāllaikā.

const socket = new WebSocket('ws://localhost:8080'); // Savienojuma izveide ar WebSocket serveri

socket.onopen = function(event) {
  console.log('WebSocket ir izveidots'); // Savienojuma notikums
  socket.send('Sveiki no klienta!'); // Ziņojuma sūtīšana
};

socket.onmessage = function(event) {
  console.log('Saņemta ziņa no servera:', event.data); // Ziņojuma saņemšana
};

socket.onerror = function(event) {
  console.error('WebSocket kļūda:', event); // Kļūdas notikums
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Savienojums tika aizvērts tīri, kods=' + event.code + ' iemesls=' + event.reason);
  } else {
    console.error('Savienojums tika pārtraukts'); // Piemēram, servera process tika pārtraukts
  }
};

// Savienojuma aizvēršana
// socket.close();

Izvēle ir atkarīga no projekta prasībām, nepieciešamības strādāt ar promisiem, ērtības apstrādājot pieprasījumus un papildu funkcijām (per interceptor, pieprasījumu atcelšana Axios utt.). Fetch API ir mūsdienu standarts asenkrono pieprasījumiem, bet Axios ir jaudīga bibliotēka ar papildu iespējām. XHR tiek izmantots retāk jaunākos projektos, bet ir svarīgs pamatu izpratnei. WebSockets ir neaizvietojami interaktīvām lietojumprogrammām ar datu apmaiņu reāllaikā.

Kādus rīkus izmantojat, lai sazinātos ar serveri?