[转载]离开页面时，你知道如何可靠地发送一个 HTTP 请求吗？

作者: wwmin_ | 来源:发表于2022-07-05 10:23 被阅读0次

转自: https://mp.weixin.qq.com/s/QPNgEkee8x1HcIdNmushRw
在某些情况下，当用户跳转到其他页面或者提交一个表单的时候，我需要发送一个 HTTP 请求，用于把一些数据记录到日志中。思考如下场景——当一个链接被点击时，需要发送一些信息到外部服务器：

<a href="/some-other-page" id="link">Go to Page</a>

<script>
document.getElementById('link').addEventListener('click', (e) => {
  fetch("/log", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    }, 
    body: JSON.stringify({
      some: "data"
    })
  });
});
</script>

这个示例并不复杂。链接的跳转行为仍然会正常的执行（我并没有使用 e.preventDefault() 去阻止），但是在这个行为发生之前，单击事件会触发一个 POST 请求。我们只需要它发送到我们正在访问的服务即可，而不需要等待这个请求返回。

乍一看你可能会觉得处理这个请求是同步的，请求发出后，在我们继续跳页面的同时，其他服务器会成功地处理这个请求。但事实上，情况并非总是如此。

浏览器不能保证持续保持 HTTP 请求的打开状态

当页面因为某些原因被终止时，浏览器是没法保证正在进行中的 HTTP 请求能够成功完成（了解更多^[1]关于页面的“终止”以及页面生命周期的其他状态）。这些请求的可信度取决于多个因素 —— 网络连接、程序性能甚至是外部服务器自身的配置。

因此，这种情况下发出的数据可靠性很糟，如果你的业务决策依赖这些日志数据，这可能会带来一个潜在的重大隐患。

为了说明这种场景的不可靠性，我编写了一个基于 Express 的简单应用，并使用以上代码实现了一个页面。当点击链接时，浏览器会导航到 /other，但此之前，会触发一个 POST 请求。

开始之前，我会将开发者工具的“网络”标签打开，使用“低速3G”连接速度。一旦页面加载完成，我就清除日志，事情看起来相当正常:

image.png

但是一旦我单击了链接，事情就不太对了。当页面导航发生的时候，POST 请求就被取消了。

640.gif

这使得我们对外部服务实际上能够处理完这个请求没有足够的信心。为了验证这个行为，当我们以编程方式使用 window.location 导航时，相同的情况也会发生:

document.getElementById('link').addEventListener('click', (e) => {
+ e.preventDefault();

  // Request is queued, but cancelled as soon as navigation occurs. 
  fetch("/log", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    }, 
    body: JSON.stringify({
      some: 'data'
    }),
  });

+ window.location = e.target.href;
});

无论导航是如何或何时发生的，以及活动页面是如何终止的，那些未完成的请求都有被抛弃的风险。

但是它们为什么会被取消呢？

问题的根源在于，默认情况下 XHR 请求（通过 fetch 或 XMLHttpRequest）是异步且非阻塞的。一旦请求进入队列，请求的实际工作就会交给后台的浏览器级 API。

从性能考虑，这是正确的行为——你并不会希望主线程被请求给堵塞。但是这会带来一个风险，就是当页面进入“终止”状态时，这些请求会被抛弃，这就导致了在后台运行的服务不能保证正确完成。这是谷歌对于这个特定生命周期状态的总结^[2]：

页面浏览器开始卸载页面并对其内存清理时，该页面就进入终止状态。在此状态下，不会执行任何新任务^[3]，同时正在处理中的任务如果运行时间过长可能会被杀死。

简单来说，浏览器的设计是基于这样的假设：只要页面关闭时，后台队列中的任何进程都不需要再继续执行。

所以我们有没有别的选择？

似乎避免这个问题最直接的方法是尽可能地延迟用户操作，直到请求的响应返回。在过去，通过使用 XMLHttpRequest 支持的同步标志^[4]来实现。但这是错误的，因为使用这种方式会完全的阻断主线程，从而造成一大堆的性能问题——关于这个问题我曾写过一些东西^[5]——所以不要考虑这种方式了。事实上，平台也正在移除这种方式（Chrome v80+ 已经将其移除^[6]）。

即使你仍打算采用这种方式，也最好使用 Promise 并在其响应返回时执行 resolve。这样你就可以安全地执行该行为。对上面我们示例的代码进行修改:

document.getElementById('link').addEventListener('click', async (e) => {
  e.preventDefault();

  // Wait for response to come back...
  await fetch("/log", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    }, 
    body: JSON.stringify({
      some: 'data'
    }),
  });

  // ...and THEN navigate away.
   window.location = e.target.href;
});

这样就可以完成工作了，但存在的缺点也不容忽视。

首先，它会使期望的行为延迟发生，这会降低用户体验。 收集分析数据当然会给商务(或许也会对潜在用户)带来收益，但为此收益让既有用户付出代价就不是一个好的选择了。更不用说，作为外部依赖，服务本身的任何延迟或其他性能问题都将暴露给用户。如果因为分析服务的超时导致了客户无法完成高价值的操作，那么所有人都将蒙受损失。

其次，这种方法并不像听起来那样可靠，因为一些终止行为不能通过编程方式延迟。 例如，e.preventDefault() 在延迟关闭浏览器标签时是不起作用的。所以，最好的情况下，这种方式可以涵盖一些用户行为的数据收集，但缺乏足够的可信度。

指示浏览器保持未完成的请求

值得高兴的是，绝大多数浏览器都内置了保持未完成 HTTP 请求的能力，而且不需要牺牲用户体验。

使用 Fetch 的 keepalive 标志

当使用 fetch() 方法时，如果把 keeplive 标志^[7]设置为 true，即便页面被终止请求也会保持连接。对我们最初的用例进行修改如下：

<a href="/some-other-page" id="link">Go to Page</a>

<script>
  document.getElementById('link').addEventListener('click', (e) => {
    fetch("/log", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      }, 
      body: JSON.stringify({
        some: "data"
      }), 
      keepalive: true
    });
  });
</script>

当单击链接时，页面进行跳转，但是请求没有被取消。

640 (1).gif

事实上，我们是留下了一个(unknown)状态，这只是因为活动页面不会等待接收任何类型的响应。

只需要添加这样一行代码，使得修复这个问题看起来很简单，特别是当它被常见浏览器的 API 支持时。但如果你想寻找一个更专业的接口方式，还有另外一种几乎相同受到浏览器支持的方法。

使用 Navigator.sendBeacon() 方法

sendbeacon() 方法专门用于发送单向请求(beacons^[8])。一个基本的实现是这样的，发送一个带有 JSON 字符串和一个 Content-Type 是 "text/plain" 的 POST 请求:

navigator.sendBeacon('/log', JSON.stringify({
  some: "data"
}));

但是这个 API 并不允许你设置自定义的 headers。所以，为了方便我们使用 "application/json" 格式发送数据，我们需要使用 Blob 做一点小的调整:

<a href="/some-other-page" id="link">Go to Page</a>

<script>
  document.getElementById('link').addEventListener('click', (e) => {
    const blob = new Blob([JSON.stringify({ some: "data" })], { type: 'application/json; charset=UTF-8' });
    navigator.sendBeacon('/log', blob));
  });
</script>

最后，我们可以得到相同的结果——请求在页面跳转之后也可以完成。但是，还有一些情况下可能会让它比 fetch() 更有优势: beacons 以低优先级发送。

为了演示说明，以下是 Network 选项卡中同时使用带 keepalive 的 fetch() 和 sendBeacon() 时的情况:

image.png

默认情况下，fetch() 获得一个 “高” 优先级，而 beacon(上图中的 “ping” 类型) 具有 “最低” 优先级。对于那些对页面功能不是很重要的请求，这是一件好事。直接引用 Beacon规范^[9]:

该规范定义了一个接口，该接口 […] 在确保此类请求仍然得到处理并交付到目的地的情况下，最大限度地减少了其与其他时间敏感操作的资源竞争。

换个说法就是，sendBeacon() 方法确保了那些程序中真正的关键过程和用户体验不会受到影响。

给 ping 属性荣誉提名

值得一提的是越来越多的浏览器开始支持 ping 属性^[10]。当在链接上设置该属性时，链接被点击时会触发一个小型的 POST 请求：

<a href="http://localhost:3000/other" ping="http://localhost:3000/log">
  Go to Other Page
</a>

这些请求 headers 里会带着链接所在页面的地址（ping-from）以及链接 href 指向的地址（ping-to）:

headers: {
  'ping-from': 'http://localhost:3000/',
  'ping-to': 'http://localhost:3000/other'
  'content-type': 'text/ping'
  // ...other headers
},

这在技术上很接近发送一个 beacon，但是有一些需要注意的限制：

1. 它被严格的限制只能在超链接使用。你不能将它用于跟踪与其他交互相关的数据，比如按钮点击或表单提交。
2. 大部分浏览器支持的很好，但不是所有^[11]。在撰写本文时，Firefox还没有默认启用这个功能。
3. 你不能使用其发送自定义的数据。如前面提到的，除了请求本身包含的 header 信息外，你最多在 header 中额外获得几个 ping-*。

考虑以上所有因素，如果你只是要求发送简单的请求，并且不想编写任何自定义 JavaScript，那么 ping 是一个很好的工具。但如果你需要发送一些更有意义的东西，这就不是最好的选择。