「取消」与「忽略」：两种处理竞态问题的方案

前端

2023-09-20 19:19:57

在网络竞态中保持领先：取消与忽略过期请求

什么是网络竞态？

想象一下你在购物网站上搜索一双新鞋。你输入关键词，按下回车键，然后等待结果。这时，你又有了新的想法，于是再次输入关键词。由于网络的不稳定性，新请求可能会先于旧请求返回结果，导致旧结果被覆盖。这就是网络竞态的本质。

网络竞态产生的原因

网络竞态通常发生在搜索、分页和选项卡切换等场景中。这些场景的特点是：

异步请求： 浏览器向服务器发送请求并等待响应。
网络延迟： 请求和响应之间可能会存在延迟。
并发请求： 在延迟期间，用户可能会发出多个请求。

取消过期请求

原理： 当发出新的请求时，取消旧的请求。这可以通过 AbortController 对象实现，它提供了一个 abort() 方法来取消请求。

代码示例：

const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal })
  .then((response) => {
    // 处理响应
  })
  .catch((error) => {
    // 处理错误
  });

if (新的请求发出) {
  controller.abort();
}

优点： 有效防止过期请求的竞态问题。

缺点： 可能会导致请求被中途取消，浪费网络资源。

忽略过期请求

原理： 当新的请求返回结果时，忽略旧的请求的结果。这可以通过 Promise.race() 方法实现，它会返回最先完成的 Promise 的结果，而忽略其他 Promise 的结果。

代码示例：

const promise1 = fetch(url1);
const promise2 = fetch(url2);

Promise.race([promise1, promise2])
  .then((response) => {
    // 处理响应
  })
  .catch((error) => {
    // 处理错误
  });