获取请求之间的竞争

Question

我正在开发一个跟踪器，该跟踪器应该在我们客户的网站上收集一些数据，并在网站用户离开页面时使用获取请求将其发送到我们的 API。

想法是使用 beforeunload 事件处理程序来发送请求，但我已经阅读了 here 为了覆盖大多数浏览器，我还需要使用 unload 事件处理程序。

这是我们的客户将放在其网站上的跟踪器代码的相关部分：

var requestSent = false;
function submitData(element_id, url) {
    
    if (!requestSent) {
        
        var data = JSON.stringify({ourobject});
    
    
        fetch(url, {
           method: 'POST',
           headers: {
             'Accept': 'application/json',
             'Content-Type':'application/x-www-form-urlencoded',
           },
          body: data,})
        .then(response => response.json())
        .then((data) => {
           console.log('Hello?');
           requestSent = true;
        });
    } 
}

window.addEventListener('beforeunload', function (e) { submitData(1, "https://oursiteurl/metrics");});
window.addEventListener('unload', function(event) {submitData(1, "https://oursiteurl/metrics"); });

我在 chrome 上对此进行了测试，两个请求都通过了，而不仅仅是第一个请求成功，这导致我们的数据库中出现重复的数据。

将控制台登录放在

requestSent

标志设置为 true 的部分旁边后，我意识到这部分代码永远不会被执行。

如果我在网络选项卡中保留日志，它会说两个请求都被取消，即使数据到达我们的端点。

我们的 API 是在 Codeigniter 中创建的，这里是 /metrics 端点：

public function submit () {
      
      $this->cors();

      $response = [
          'status' => 'error',
          'message' => 'No data',
      ];
      
      $data = json_decode(file_get_contents('php://input'), true);
      if (empty($data)) {
          echo json_encode($response);exit();
      }
      // process data and do other stuff ...

Cors功能：

private function cors() {

      // Allow from any origin
      if (isset($_SERVER['HTTP_ORIGIN'])) {
          // Decide if the origin in $_SERVER['HTTP_ORIGIN'] is one
          // you want to allow, and if so:
          header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
          header('Access-Control-Allow-Credentials: true');
          header('Access-Control-Max-Age: 86400');    // cache for 1 day
      }

      // Access-Control headers are received during OPTIONS requests
      if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

          if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
              // may also be using PUT, PATCH, HEAD etc
              header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

          if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
              header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

      }

  }

编辑：

感谢 @CBroe 建议使用 Beacon API，使用它就不再需要

unload

和

beforeunload

事件处理程序：

submitData

现在看起来像这样：

...
if (navigator.sendBeacon) {
        let beacon = navigator.sendBeacon(url, data);
        console.log( 'Beacon', beacon );
    } else { // fallback for older browsers
        if (!requestSent) {
            console.log( 'Data object from fallback', data );
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url, false); // third parameter of `false` means synchronous
            xhr.send(data);
    }
 ... 

这样做允许我只保留

beforeunload

事件处理程序，因为它可以在 IE 和 Chrome 上运行:

 window.addEventListener('beforeunload', function (e) { submitData(1, "https://oursiteurl/metrics");});

Answer 1

这个想法是使用

beforeunload

事件处理程序来发送请求，但我在这里读到为了覆盖大多数浏览器，我还需要使用

unload

事件处理程序。

两者都不太适合发出 AJAX/fetch 请求，当页面实际卸载时它们很可能会被取消。

您应该使用Beacon API，它是专门为此类跟踪/保持活动请求而设计的。

根据 MDN 上的浏览器兼容性列表，Internet Explorer 尚不支持它。如果您也需要对此进行跟踪，也许可以采用双管齐下的方法 - 用于支持它的浏览器的 Beacon，用于 IE 的 AJAX/fetch 后备。