Какви инструменти използвате за взаимодействие със…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Настройка на заявката
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Обработка на успешен отговор
    console.log(data);
  } else {
    // Обработка на грешки
    console.error('Грешка при заявката:', xhr.status);
  }
};
xhr.onerror = function() {
  // Обработка на мрежови грешки
  console.error('Мрежова грешка');
};
xhr.send(); // Изпращане на заявката

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP статус ' + response.status); // Обработка на HTTP грешки
    }
    return response.json(); // Парсиране на JSON
  })
  .then(data => {
    console.log(data); // Обработка на данните
  })
  .catch(error => {
    console.error('Грешка при заявката:', error); // Обработка на други грешки
  });

Библиотеки, базирани на Fetch или XHR:

Axios:

// Инсталиране на Axios: npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // Достъп до данните чрез .data
  })
  .catch(error => {
    console.error('Грешка при заявката:', error); // Обработка на грешки
  });

jQuery.ajax: (Ако се използва jQuery)

// Необходима е библиотеката jQuery

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Очакван тип данни
  success: function(data) {
    console.log(data); // Обработка на успешен отговор
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Грешка при заявката:', textStatus, errorThrown); // Обработка на грешки
  }
});

WebSockets: За двупосочна комуникация в реално време.

const socket = new WebSocket('ws://localhost:8080'); // Свързване към WebSocket сървър

socket.onopen = function(event) {
  console.log('WebSocket свързан'); // Събитие за свързване
  socket.send('Здравей от клиента!'); // Изпращане на съобщение
};

socket.onmessage = function(event) {
  console.log('Получено съобщение от сървъра:', event.data); // Получаване на съобщение
};

socket.onerror = function(event) {
  console.error('Грешка WebSocket:', event); // Събитие за грешка
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Чисто затваряне, код=' + event.code + ' причина=' + event.reason);
  } else {
    console.error('Свързването е прекъснато'); // Например, процесът на сървъра е убит
  }
};

// Затваряне на връзката
// socket.close();

Изборът на инструмент зависи от изискванията на проекта, необходимостта от работа с обещания, удобството при обработка на заявките и наличието на допълнителни функции (прекъсвачи, отменяне на заявки Axios и др.). Fetch API е съвременният стандарт за асинхронни заявки, а Axios е мощна библиотека, предоставяща допълнителни възможности. XHR се използва по-рядко в нови проекти, но е важен за разбиране на основите. WebSockets са незаменими за интерактивни приложения с обмен на данни в реално време.

Какви инструменти използвате за взаимодействие със сървъра?