Beacon API的应用-在浏览器被关闭之前要调用一个后端提供的请求

遇到了一个需求就是，在浏览器被关闭之前要调用一个后端提供的请求，我一开始用axios,信誓旦旦的说，木有问题，后端后来告诉我，没有接收到有请求，这个时候我就去排除下原因，我debugger看了下，明明有发送请求只不过在unload的时候还是pending状态。猜测是不是请求被中断了。尝试用同步请求发现还是没有用，那我能想到的就是用原生的http同步请求，但是缺点也很明显，性能差。所以我又百思不得其解，终于在mdn上找到了一个api

window.addEventListener("unload", function() {
      let ISEdit = sessionStorage.getItem("isCanEdit") == "true" ? true : false;
      if (ISEdit) {
        let params = new FormData();
        params.append("patientContentId", self.getquestionId);
        navigator.sendBeacon(
          `${config.baseurl}/patient/deleteExclusive`,
          params
        );
        ;
      }
    });

要后端配合的就是需要post请求并且要改成formdata方式入参，大功告成

 

Question & Solution
Beacon API 不会延缓网页卸载，不会严重影响用户体验。

为了解决网页卸载时，异步请求无法成功的问题，浏览器特别实现了一个 Beacon API，允许异步请求脱离当前主线程，放到浏览器进程里面发出，这样可以保证一定能发出。

navigator.sendBeacon()方法可以保证，异步请求一定会发出；
第一个参数是请求的网址，第二个参数是发送的数据；

Beacon API 发出的是 POST 请求。

window.addEventListener('click', function (event) {
navigator.sendBeacon('/graphql/api/v3/logs', 'event=click');
});

https://api.xgqfrms.xyz/graphql/api/v3/logs

https://cdn.xgqfrms.xyz/

应用场景
埋点

异常处理

Sentry

数据收集

数据上报

性能监控