Асинхронная передача данных с помощью sendBeacon в JavaScript

В современных веб-приложениях отправка данных из JavaScript на стороне клиента на сервер является распространенной задачей. Одним из популярных способов решения этой задачи является использование запросов AJAX. Однако существуют определенные ситуации, когда AJAX не подходит, например, когда пользователь переходит со страницы или закрывает вкладку. Здесь на помощь приходит метод sendBeacon().

Метод sendBeacon() - это новое дополнение к Web API в HTML5, которое позволяет асинхронно отправлять данные на веб-сервер, не блокируя пользовательский интерфейс и не прерывая работу пользователя. В этой статье мы рассмотрим метод sendBeacon() более подробно и приведем несколько примеров, демонстрирующих его использование.

Что такое sendBeacon() и как он работает?

Метод sendBeacon() используется для асинхронной отправки небольшого количества данных на веб-сервер. Он принимает два аргумента:

navigator.sendBeacon(url);
navigator.sendBeacon(url, data);

Url - URL веб-сервера, на который будут отправлены данные.

Data - данные, которые будут отправлены на веб-сервер.

Аргумент data может быть строкой, объектом FormData или объектом Blob. Данные отправляются на веб-сервер с помощью HTTP POST-запроса с заголовком Content-Type, установленным на application/octet-stream.

Метод sendBeacon() возвращает булево значение, указывающее, были ли данные успешно поставлены в очередь на передачу. Если пользователь перейдет со страницы до того, как данные будут переданы, они будут потеряны.

Важно отметить, что метод sendBeacon() не гарантирует, что данные будут успешно переданы на веб-сервер. Данные отправляются асинхронно, поэтому нет способа узнать наверняка, были ли они успешно отправлены. Однако если метод возвращает true, это означает, что данные были успешно поставлены в очередь на передачу и будут отправлены как можно скорее.

Давайте рассмотрим несколько примеров, чтобы увидеть, как можно использовать sendBeacon().

Отправка данных в виде строки

const data="Hello, world!";
const url="/log";
const result = navigator.sendBeacon(url, data);
console.info(result); // true or false

В этом примере мы отправляем строку "Hello, world!" в конечную точку /log на сервере. Метод sendBeacon() возвращает булево значение, указывающее, были ли данные успешно поставлены в очередь на передачу.

Отправка данных в виде объекта FormData

const formData = new FormData();
formData.append("name", "John Doe");
formData.append("email", "[email protected]");
const url="/submit-form";
const result = navigator.sendBeacon(url, formData);
console.info(result); // true or false

Отправка данных в виде объекта Blob

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const url="/log";
const result = navigator.sendBeacon(url, blob);
console.info(result); // true or false

В этом примере мы создаем объект Blob, содержащий строку "Hello, world!" и устанавливаем свойство type в text/plain. Затем мы отправляем данные в конечную точку /log на сервере. И снова метод sendBeacon() возвращает булево значение, указывающее, были ли данные успешно поставлены в очередь на передачу.