Как отправить HTTP запрос в JavaScript

Как сделать HTTP запрос в JavaScript

01.02.2024
388
9 мин.
0
Содержание скрыть
  1. 1 XMLHttpRequest (XHR)
  2. 2 Jquery Ajax
  3. 3 Fetch
  4. 4 Axios
  5. 5 HTTP запрос в JavaScript для Angular через HttpClient
  6. 6 HTTP запрос в JavaScript: заключение

Веб-разработка разделяется на интерфейсную и серверную. Они также известны как клиентская и серверная части. Первая фокусируется на том, что видят пользователи, а вторая — на логике приложения. Когда пользователь просматривает сайт, браузеру необходимо обращаться к серверу для получения необходимых данных. В этой статье мы рассмотрим пять способов того, как сделать HTTP запрос в JavaScript.

Хотя обе части веб-разработки разделены, им нужен способ для связи друг с другом. Разработчикам, занимающимся интерфейсной разработкой (фронтендом), необходимо уметь создавать HTTP запросы на JS.

XMLHttpRequest (XHR)

Это базовый объект, используемый большинством библиотек для взаимодействия с серверами. Несмотря на своё название, XMLHttpRequest не только извлекает XML, но также может использоваться для получения данных другого типа, включая HTML, JSON, text, blob и т.д.

Чтобы отправить запрос, необходимо создать новый экземпляр этого объекта.

const request = new XMLHttpRequest();

XMLHttpRequest поддерживается всеми браузерами за исключением старых версий Internet Explorer (6 и ниже). Для поддержки IE5 или IE6 необходимо было создавать ActiveXObject.

var request;

if (window.XMLHttpRequest) {
    // Для современных браузеров
    request = new XMLHttpRequest();
} else {
    // Для IE6, IE5
    request = new ActiveXObject("Microsoft.XMLHTTP");
}

Затем следует инициализировать запрос с помощью метода open() и отправить его на сервер. Если запрос содержит тело, оно может быть отправлено в качестве параметра методом send(). В противном случае send() принимает параметром null.

request.open('GET', URL);
request.send(null);

XMLHttpRequest по умолчанию является асинхронным. Это означает, что вы получите обратный вызов, когда запрос будет обработан сервером. Это позволит браузеру не прекращать работу в ожидании ответа.

Стоит отметить, что выполнять синхронные запросы из-за проблем с производительностью не рекомендуется, но можно в случае необходимости. Для этого потребуется передать третьим параметром false.

request.open('GET', URL, false);

Jquery Ajax

AJAX расшифровывается как «Asynchronous JavaScript And XML». Это метод библиотеки jQuery, который использует XMLHttpRequest в фоновом режиме для выполнения HTTP запросов в JavaScript . Хотя базовым объектом является XMLHttpRequest, имеются и некоторые различия.

Jquery Ajax преобразует XMLHttpRequest в более простые методы jQuery и сокращает код, который необходим, чтобы выполнять HTTP запрос на JavaScript. Для его использования нужно будет установить jQuery или импортировать его с помощью CDN.

<script src="https://code.jquery.com/jquery-3.6.1.js"></script>

Для всех HTTP запросов на JS, которые могут быть выполнены с помощью XMLHttpRequest, также доступен и метод $.ajax. Рассмотрим простой GET запрос с обработкой ответа. Например:

$.ajax({
  url: URL,
  method: 'GET'
}).done(function( data ) {
    if ( console && console.log ) {
      console.log( 'done' );
    }
  }).fail(function() {
    alert( 'error' );
  })
  .always(function() {
    alert( 'finished' );
  });

В качестве альтернативы вы можете использовать сокращённые методы, включая $.get $.post, $.getJSON $.getScript и $.load.

var jqxhr = $.get(URL, function() {
  alert( 'success' );
}).done(function() {
    alert( 'done' );
  })
  .fail(function() {
    alert( 'error' );
  })
  .always(function() {
    alert( 'finished' );
  });

Метод $.ajax и сокращённые методы возвращают объект jQuery XMLHttpRequest (xhr), который является расширенный набор объекта браузера XMLHttpRequest. Он реализует интерфейс Promise, следовательно, HTTP запрос в JavaScript является асинхронным и допускает несколько обратных вызовов.

Как отправить HTTP запрос в JavaScript
Варианты написания HTTP запросов на JavaScript (изображение создано с помощью ИИ)

Fetch

API-интерфейс Fetch также похож на XMLHttpRequest, но с более чистым синтаксисом. В отличие от XMLHttpRequest, он не требует создания нового экземпляра объекта Request, чтобы отправить HTTP запрос на JS на сервер. Вместо этого можно использовать глобальный метод fetch() для запроса, что сделает код более коротким и удобочитаемым.

Fetch — это API на основе Promise. HTTP запросы, выполненные с использованием метода fetch() , возвращают Promise, который преобразуется в объект Response. Выполнить запрос с помощью Fetch просто, поскольку единственным обязательным полем является путь к запросу.

Это видно в приведённом ниже примере, где указано значение по умолчанию для GET запроса.

fetch(URL)
  .then((response) => response.json())
  .then((data) => console.log(data));

В качестве альтернативы можно сделать запрос, используя async/await.

var response = await fetch(URL);
var data = await response.json();
console.log(data);

Для других типов запросов можно использовать POST запрос.

Помимо JSON, ответ может быть преобразован в различные типы форматов данных с использованием других методов, таких как text(), FormData(), blob() и ArrayBuffer(). Однако доступ к ответу можно получить только с помощью одного из методов. Например, если вы уже получаете данные с помощью response.json(), вы не можете использовать response.text() для того же запроса.

Ещё один момент, на который следует обратить внимание при использовании Fetch, заключается в том, что он не будет отклонять ошибки HTTP ответа сервера, такие как 4xx и 5xx. Он будет выдавать ошибку только тогда, когда она связана с сетью.

Хотя Fetch — это элемент языка Javascript, он может быть недоступен для некоторых версий Node.js. Его реализовали только с Node версии 17.5.0 и выше. Если необходимо использовать Fetch для Node.js, потребуется внешний модуль, такой как node-fetch.

Axios

Axios — одна из самых популярных библиотек, используемых, чтобы выполнять HTTP запрос в Javascript. Она работает как для интерфейсного, так и для серверного JS. Аналогично Fetch она использует Promise для асинхронной обработки ответов.

Рассмотрим базовый код использования Axios. Например:

axios.get(URL)
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    console.log('finished');
  });

Хотя Fetch и Axios основаны на Promise, некоторые функции Axios делают его более удобным в использовании по сравнению с Fetch, в том числе:

  1. Отслеживание хода выполнения запроса.
  2. Автоматический анализ данных в формате JSON.
  3. Отслеживание ошибок HTTP.
  4. Перехват HTTP-запросов.
  5. Широкая поддержка браузерами.

Вместо того, чтобы структурировать объект в теле запроса и анализировать полученный ответ в формате JSON, можно передать объект непосредственно в запросе. Ответ вернётся в формате JSON без промежуточного шага .json(), используя response.data().

axios.post(URL, {
  item: 'Item A',
  quantity: 8
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
});

Читайте также: Рекурсия в JS (JavaScript).

HTTP запрос в JavaScript для Angular через HttpClient

Angular HttpClient построен поверх XMLHttpRequest и доступен только при использовании фреймворка Angular. Он был создан специально для него. Поэтому он предпочтительнее других методов HTTP запроса при использовании Angular.

В отличие от других методов, упомянутых ранее, Angular HttpClient не основан на Promise. Он использует библиотеку RxJS для обработки асинхронных запросов и предоставляет множество опций, позволяющих выполнять HTTP запрос в JavaScript. Возвращаемый ответ называется Observable, и на него необходимо подписаться, чтобы получить фактические данные.

constructor(private http: HttpClient) { }

ngOnInit() {

    this.http.get(URL)
        .subscribe((response) => {                          
            console.log(response)
            },(error) => {                              
            console.error('error')
        });
}

Хотя общая функция RxJS может возвращать более одного значения, функция Observable в Angular HttpClient выдаёт только одно значение для каждого запроса.

Одной из функциональных возможностей, отличающих этот метод, основанный на Observable, от других, в основе которых лежит Promise, является возможность автоматически повторять неудачные HTTP запросы с помощью оператора retry. Если запрос завершается неудачей, он повторно подпишется на Observable в соответствии с максимальным количеством раз, указанным перед возвратом ошибки.

this.http.get(URL)
    .pipe(
        retry(3),
        delay(1000) // Необязательный параметр повторной попытки через  секунду
    )
    .subscribe((response) => {                          
        console.log(response)
        },(error) => {                              
        console.error(error)
    });

Если вы хотите использовать ответ в качестве Promise, вы также можете преобразовать его из Observable, используя lastValueFrom или firstValueFrom.

lastValueFrom(observable).then((data) => {
	 console.log(data);
	}).catch((error) => {
	 console.log(error)
	})

Можно преобразовывать запрос из Observable в Promise и наоборот, учитывая, что Promise не хватает некоторых функций, которые доступны только Observable.

const observable = from(promise);

HTTP запрос в JavaScript: заключение

Хотя некоторые методы являются более новыми, а некоторые обладают дополнительными функциональными возможностями. Каждый из них имеет свои преимущества и недостатки. Лучшим методом для использования будет тот, который больше всего соответствует требованиям конкретного проекта.

Вас также может заинтересовать