JS fetch 是否可以不等待响应？

Question

我有一个日志 API，它在 link 之前执行。 link 将用户重定向到其他地方，我在用户被重定向之前执行提取。所以现在的脚本是这样的：

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

日志记录 api 只是一个普通的获取包装器。

但是，服务器现在没有收到 API 请求。我认为这是因为它甚至没有机会将请求发送到 api.

那我可以等请求发送不等响应吗？

Answer 1

您可以在 Service Worker 中发送请求。

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

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

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

初始复杂性的好处是，一旦您开始使用服务工作者，它们就会打开一个全新的编程世界；你最终会用它们做更多的事情，然后排队发送消息。

第 1 步注册一个 service worker

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 步创建服务工作者脚本

服务-worker.js

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

步骤 3 在 server worker 脚本中创建监听器

服务-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以下是最佳猜测

Note: sendBeacon uses a POST request, so the server side may need to be modified to accept such a request - though, seeing as your loggingAPI is sending data, I imagine it is already using POST - so this may be a non-issue

在代码的某处，为 windows

设置一个卸载事件

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

然后，当你

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

为您调用 loggingAPI 函数

编辑：抱歉，我没有完整地充实代码，我错过了一些步骤！！

JS fetch 是否可以不等待响应？

JS Is it possible for fetch to not wait for response?

javascript

fetch-api

第 1 步注册一个 service worker

index.html

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

服务-worker.js

步骤 3 在 server worker 脚本中创建监听器

服务-worker.js

第 4 步在重定向之前发送消息

index.html