欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Navigator?sendBeacon頁面關(guān)閉也能發(fā)送請求方法示例

 更新時間:2022年06月30日 15:43:46   作者:涅槃快樂是金  
這篇文章主要為大家介紹了Navigator?sendBeacon頁面關(guān)閉也能發(fā)送請求的方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

背景

最近在需求中有一個這樣的場景:

需要在頁面關(guān)閉的時候,用戶不需要操作,主動關(guān)閉當前訂單

當時考慮的方案:在頁面關(guān)閉的時候,向后端發(fā)送一個請求,將這個資源釋放掉;

定下方案時,覺得也不是什么難事,覺得谷歌瀏覽器應(yīng)該會提供頁面關(guān)閉的 API 供開發(fā)者使用。

經(jīng)過查找,找到了這么兩個 API :beforeunload 和 unload

beforeunload

當瀏覽器窗口關(guān)閉或者刷新時,會觸發(fā) beforeunload 事件。當前頁面不會直接關(guān)閉,可以點擊確定按鈕關(guān)閉或刷新,也可以取消關(guān)閉或刷新。

window.addEventListener('beforeunload', function (event) {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

該事件會使網(wǎng)頁在離開或者刷新的時候彈出一個對話框,給用戶一個提示。在這個彈框出現(xiàn)時,該頁面是做不了任何操作的,除非把這個彈框關(guān)閉。其他頁面也只能進行簡單的點擊瀏覽操作,鍵盤是操作不了的。

這個不符合用戶無感知的條件

unload

當文檔或一個子資源正在被卸載時, 觸發(fā) unload 事件。

unload 事件在 beforeunload 事件后觸發(fā),這時候文檔處于一個什么狀態(tài)呢?
所有資源都存在,像圖片,iframe的等,但是這些資源對于用戶來說均不可見,界面上的交互也是無效的.

使用方式和 beforeunload 相同,但是 unload 事件中不能使用確認框,畢竟都已經(jīng)在卸載了

window.addEventListener('unload', function(event) {
  console.log('unload');
});

問題

  • 用戶無論刷新還是關(guān)閉了頁面,因為這兩種操作都會調(diào)用beforeunload和 unload。
  • 異步請求會被 cancel 掉,導(dǎo)致請求無法發(fā)送成功,由于使用的axios進行請求,瀏覽器有幾率關(guān)閉異步請求,造成請求無法發(fā)出,可以嘗試換成同步。
  • 在事件的回調(diào)中使用同步的 AJAX 請求。
window.addEventListener('unload', function (event) {
  let xhr = new XMLHttpRequest();
  xhr.open('post', '/log', false);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('foo=bar');
});

但是谷歌瀏覽器已經(jīng)不允許頁面關(guān)閉期間進行同步的 XMLHTTPRequest(),這條規(guī)則適用于 beforeunload、unload、pagehide和visibilitychange這些 API;

為了確保頁面在卸載時講數(shù)據(jù)發(fā)送到服務(wù)器,官方建議使用 sendBeacon()或者 Fetch keep-alive

Navigator.sendBeacon

官方鏈接 https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon

這個方法主要用于滿足統(tǒng)計和診斷代碼的需要,這些代碼通常嘗試在卸載(unload)文檔之前向web服務(wù)器發(fā)送數(shù)據(jù)。

Beacon API 有以下這樣幾個特點:

  • 通過 HTTP POST 將少量數(shù)據(jù)異步傳輸,可靠性好
  • 這個請求不需要響應(yīng),保證在頁面的 unload 狀態(tài)從發(fā)起到完成之前被發(fā)送。
  • 不會阻塞頁面卸載,也就不會影響下一導(dǎo)航的載入
  • 支持跨域
  • 不支持自定義請求頭

用法如下:

navigator.sendBeacon(url, data);

url 就是上報地址,data 可以是 ArrayBufferView,Blob,DOMString 或 Formdata,根據(jù)官方規(guī)范,需要 request header 為 CORS-safelisted-request-header,在這里則需要保證 Content-Type 為以下三種之一:

application/x-www-form-urlencoded

multipart/form-data

text/plain

我們一般會用到 DOMString , Blob 和 Formdata 這三種對象作為數(shù)據(jù)發(fā)送到后端,下面以這三種方式為例進行說明。

DOMString

如果數(shù)據(jù)類型是 string,則可以直接上報,此時該請求會自動設(shè)置請求頭的 Content-Type 為 text/plain。

const reportData = (url, data) => {
  navigator.sendBeacon(url, data);
};

Blob

如果用 Blob 發(fā)送數(shù)據(jù),這時需要我們手動設(shè)置 Blob 的 MIME type,一般設(shè)置為 application/x-www-form-urlencoded。

const reportData = (url, data) => {
  const blob = new Blob([JSON.stringify(data), {
    type: 'application/x-www-form-urlencoded',
  }]);
  navigator.sendBeacon(url, blob);
};

Formdata

可以直接創(chuàng)建一個新的 Formdata,此時該請求會自動設(shè)置請求頭的 Content-Type 為 multipart/form-data。

const reportData = (url, data) => {
  const formData = new FormData();
  Object.keys(data).forEach((key) => {
    let value = data[key];
    if (typeof value !== 'string') {
      // formData只能append string 或 Blob
      value = JSON.stringify(value);
    }
    formData.append(key, value);
  });
  navigator.sendBeacon(url, formData);
};

注意這里的 JSON.stringify 操作,服務(wù)端需要將數(shù)據(jù)進行 parse 才能得到正確的數(shù)據(jù)。

Fetch keep-alive

當使用fetch() 方法時,如果把keeplive 設(shè)置為true,即便頁面被終止請求也會保持連接。

window.onunload = function() {
  fetch('/analytics', {
    method: 'POST',
    body: "statistics",
    keepalive: true
  });
};

以上就是Navigator sendBeacon頁面關(guān)閉也能發(fā)送請求方法示例的詳細內(nèi)容,更多關(guān)于Navigator sendBeacon請求發(fā)送的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論