Як зробити HTTP-запит в Javascript?

Щоб зробити HTTP-запит в JavaScript, можна скористатися вбудованим методом або об'єктом.fetch()XMLHttpRequest()

За допомогою методу fetch():

javascriptCopy codefetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Використання об'єкта XMLHttpRequest()

JavaScriptCopy codeconst request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    const data = JSON.parse(this.response);
    console.log(data);
  } else {
    console.error('Request failed with status code', this.status);
  }
};
request.onerror = function() {
  console.error('Request failed');
};
request.send();

В обох випадках замініть 'url-адресу з URL-адресою кінцевої точки API або ресурсу, до якого ви хочете отримати доступ. Програмаfetch() метод повертає обіцянку, яка переходить до об'єкта відповіді, з якого потім можна витягти дані. "XMLHttpRequestXMLHttpRequest() об'єкт надсилає HTTP-запит і обробляє відповідь, використовуючи його onload іonerror Методи.

Ajax

Ajax — це традиційний спосіб створення асинхронного запиту HTTP. Дані можна надсилати за допомогою методу HTTP POST і отримувати за допомогою методу HTTP GET. Давайте подивимось, як зробити запит GET. Я буду використовувати сайт JSONPlaceholder – безкоштовний онлайн API REST для розробників, який повертає випадкові дані у форматі JSON.

Щоб зробити виклик HTTP в Ajax, потрібно ініціалізувати новий метод XMLHttpRequest() та вказати кінцеву точку URL-адреси і метод HTTP (у цьому випадку GET). Далі ми використовуємо метод open() для зв’язування методу HTTP та кінцевої точки URL-адреси і викликаємо метод send() для ініціалізації запиту.

Ми реєструємо відповідь HTTP в консолі за допомогою властивості XMLHTTPRequest.onreadystatechange, яка містить обробник подій, що викликається, коли подія readystatechanged запускається.

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Якщо ви переглянете консоль браузера, то побачите, що вона поверне масив даних у форматі JSON. Але як ми можемо знати, чи запит виконано? Іншими словами, як ми можемо обробляти відповіді за допомогою Ajax?

Властивість onreadystatechange має два методи: readyState та status, які дозволяють перевірити стан нашого запиту.

Якщо readyState дорівнює 4, то це свідчить про те, що запит виконано. Властивість readyState має 5 відповідей. Дізнайтесь про них більше за цим посиланням.

Окрім прямого виклику Ajax за допомогою JavaScript існують й інші, більш потужні методи здійснення виклику HTTP (наприклад, $.Ajax, який є методом jQuery) і тому я зупинюсь на них більш детально.