JS是否有可能不等待响应而获取？

Question

我有一个记录API，该API在链接之前执行。链接会将用户重定向到其他地方，我正在执行fetch，然后再重定向用户。所以脚本现在是这样的：

loggingAPI({
    timestamp: moment()
})
window.location = "http://.......com"

日志记录api只是普通的提取包装器。

但是，服务器目前未收到API请求。我认为是因为它甚至没有机会将请求发送到api。

所以我可以等待请求发送但不等待响应吗？

Answer 1

您可以在服务工作者中发送请求。

https://developers.google.com/web/fundamentals/primers/service-workers/

以下是一些特定的信息： https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent

您将注册服务工作者，然后在重定向之前向其发送消息。

最初的复杂性在于，一旦您开始使用服务工作者，他们就会打开一个全新的编程世界。您最终将使用它们更多的内容，然后排队发送消息。

步骤1注册服务工作者

index.html

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

步骤2创建服务工作者脚本

service-worker.js

self.addEventListener('install', function(e) {
    return Promise.resolve(null)
});

步骤3在服务器辅助程序脚本中创建侦听器

service-worker.js

self.addEventListener('message', function (event) {
  console.log('message', event.data)
  // call fetch here, catching and responding to what you stashed in the message      
});

第4步，在重定向之前先发送邮件

index.html

只是一个演示来模拟您的客户端。

 setTimeout(() => {
    navigator.serviceWorker.controller.postMessage({message: 'A LOG MESSAGE'});
  }, 2000)

将所有部件放好之后，请确保关闭所有标签并重新打开，或者设置了chrome开发工具来处理工作人员的刷新。

Answer 2

使用sendBeacon非常简单

没有看到适合您的功能的代码loggingAPI，以下是最佳猜测

  

注意：sendBeacon使用POST请求，因此可能需要修改服务器端以接受这样的请求-尽管看到您的loggingAPI正在发送数据，我想它已经在使用POST-因此这可能不是问题

在代码中的某处为Windows设置一个卸载事件

window.addEventListener("unload", () => {
    sendBeacon("same url as loggingAPI", JSON.parse({timestamp: moment()}));
}, false);

然后，当您

window.location = "http://.......com"

loggingAPI函数会为您调用

编辑：对不起，我没有充分充实代码，错过了几步！！