Ի՞նչ գործիքներ եք օգտագործում սերվերի հետ շփվելու համար:

• 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); // Այլ սխալների մշակումը
    });
  

• Kitobxanayn bazgashteb ba Fetch ya 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-ը անփոխարինելի է ինտերակտիվ հավելվածների համար, որոնք իրական ժամանակում տվյալների փոխանակում են պահանջում։