სერვერთან ურთიერთქმედებისთვის რა ინსტრუმენტებს იყენებთ?

• 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 შეუცვლელია ინტერაქტიული აპლიკაციებისათვის, სადაც რეალურ დროში მონაცემთა გაცვლა სჭირდება.