需求
這兩天碰到一個(gè)需求：在用戶刷新頁(yè)面或者關(guān)閉頁(yè)面的時(shí)候，前端要給后臺(tái)發(fā)一條請(qǐng)求洗搂，釋放該頁(yè)面的授權(quán)占用。
分析了一下载弄，這不就是在頁(yè)面卸載時(shí)發(fā)請(qǐng)求嘛耘拇，三下五除二就實(shí)現(xiàn)一版：
window.addEventListener("beforeunload", () => {
let oReq = new XMLHttpRequest();
oReq.open("POST", "http://127.0.0.1:1991/loginout");
oReq.send(JSON.stringify({name: "編程三昧"}));
測(cè)試發(fā)現(xiàn)：
- 刷新頁(yè)面時(shí)基本滿足需求（偶爾也會(huì)有后臺(tái)接收不到請(qǐng)求的現(xiàn)象，但概率很低）
- 關(guān)閉頁(yè)面時(shí)宇攻，后臺(tái)接收不到請(qǐng)求
既然異步 Ajax 不行惫叛，那就試試同步的吧，結(jié)果直接報(bào)錯(cuò)了：
搜了一下逞刷，解釋如下：
Chrome now disallows synchronous XHR during page dismissal when the page is being navigated away from or closed by the user. This involves the following events (when fired on the path of page dismissal): beforeunload, unload, pagehide, and visibilitychange.
概括起來就是：對(duì)現(xiàn)在的 Chrome 來說嘉涌，在頁(yè)面導(dǎo)航離開或者被用戶關(guān)閉時(shí)妻熊，不允許發(fā)送同步 XHR 請(qǐng)求，涉及到的事件有：beforeunload仑最、unload扔役、pagehide 和 visibilitychange。
雖然問題沒解決警医，但是卻長(zhǎng)知識(shí)了亿胸，這波不太虧！
navigator.sendBeacon()
后來通過搜索预皇，看到有一個(gè)接口是專門來干這事的侈玄，那就是 navigator.sendBeacon() 。
描述
這個(gè)方法主要用于滿足統(tǒng)計(jì)和診斷代碼的需要深啤，這些代碼通常嘗試在卸載（unload）文檔之前向web服務(wù)器發(fā)送數(shù)據(jù)拗馒。
語(yǔ)法
navigator.sendBeacon(url, data);
參數(shù)
-
url表明data將要被發(fā)送到的網(wǎng)絡(luò)地址。 -
data參數(shù)是將要發(fā)送的ArrayBufferView或Blob溯街、DOMString或者FormData類型的數(shù)據(jù)诱桂。
返回值
當(dāng)用戶代理成功把數(shù)據(jù)加入傳輸隊(duì)列時(shí)，sendBeacon() 方法將會(huì)返回 true呈昔，否則返回 false挥等。
實(shí)現(xiàn)
既然有了接口，那實(shí)現(xiàn)起來就簡(jiǎn)單了堤尾。
代碼
window.addEventListener("beforeunload", (e) => {
const data = {name: "編程三昧"};
window.navigator.sendBeacon("http://127.0.0.1:1991/loginout", JSON.stringify(data));
});
效果
不管是刷新頁(yè)面還是關(guān)閉頁(yè)面肝劲，后臺(tái)都能接收到前端發(fā)送過來的請(qǐng)求，完美實(shí)現(xiàn)需求郭宝。
總結(jié)
瀏覽器現(xiàn)在功能越來越強(qiáng)大辞槐，支持的 API 也越來越豐富，放在之前很難實(shí)現(xiàn)的功能粘室，現(xiàn)在可能就是輕而易舉的事榄檬，還是要多關(guān)注技術(shù)動(dòng)態(tài)。
~
~本文完衔统，感謝閱讀鹿榜！
~
學(xué)習(xí)有趣的知識(shí)，結(jié)識(shí)有趣的朋友锦爵，塑造有趣的靈魂舱殿！
大家好，我是〖編程三昧〗的作者 隱逸王险掀，我的公眾號(hào)是『編程三昧』沪袭，歡迎關(guān)注，希望大家多多指教樟氢！
你來冈绊，懷揣期望创倔，我有墨香相迎！ 你歸焚碌，無論得失，唯以余韻相贈(zèng)霸妹！
知識(shí)與技能并重十电，內(nèi)力和外功兼修，理論和實(shí)踐兩手都要抓叹螟、兩手都要硬鹃骂！
