Кадом асбобҳоро барои муошират бо сервер истифода…

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 барои барномаҳое, ки ба алоқаи дуҷониба дар вақти воқеӣ ниёз доранд, беназир мебошанд.

Кадом асбобҳоро барои муошират бо сервер истифода мебаред?