Koje alate koristite za interakciju sa serverom…

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 су незаменљиви за интерактивне апликације са разменом података у реалном времену.

Koje alate koristite za interakciju sa serverom?