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

• 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 status ' + 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 незаменимы для интерактивных приложений с обменом данными в реальном времени.