请求时序错乱：「后发先至」隐藏在异步请求中的“幽灵”

请求时序错乱（Race Condition）

一、定义与核心问题

‌请求时序错乱（Race Condition） ‌ 是并发编程中因多个线程/进程无序访问共享资源导致的程序结果不可预测问题，常见于异步、分布式系统或高并发场景

‌典型表现‌：

• 数据覆盖（如多线程同时执行 i++ 导致计数错误）；
• 状态不一致（如基于过期数据执行操作）；
• 异步请求响应顺序与发起顺序不一致；

二、 处理方案

1. ‌同步机制‌

• ‌互斥锁/信号量‌：通过锁机制限制同一时间仅一个线程访问共享资源。例如，使用互斥锁保护临界区代码；
• ‌条件变量‌：协调多线程对共享资源的访问顺序，避免无效等待；
• ‌事务锁 ‌：数据库层面通过 BEGIN 和 COMMIT 锁定事务操作，确保原子性。

2. ‌请求时序控制‌

• ‌请求中断‌（AbortController）：前端场景下，终止前一次未完成的异步请求后再发起新请求，避免旧响应覆盖新数据；
• ‌唯一标识符‌：为每个请求附加唯一ID，响应时校验ID是否匹配当前最新请求，丢弃过期结果；
• ‌Promise链式调用 ‌：通过 async/await 或 Promise.all 控制异步操作顺序，确保逻辑按预期执行。

3. ‌状态管理优化‌

• ‌不可变数据（Immutable） ‌：使用不可变数据结构，避免直接修改共享状态，每次操作返回新副本；
• ‌原子操作类 ‌：利用语言特性（如Java的 AtomicInteger）或数据库原子指令（如 CAS），确保操作不可分割。

4. ‌业务逻辑优化‌

• ‌限制并发操作‌：例如在兑换、抢购场景下，通过队列或令牌桶算法控制请求速率；
• ‌数据版本控制‌：对共享资源增加版本号，操作前校验版本是否一致，避免基于旧版本修改；

三、前端场景详解与代码示例

1. 前端典型场景

• ‌搜索框输入‌：用户快速输入关键词，后发请求先返回导致显示旧数据；
• ‌分页切换‌：快速切换分页时，旧页数据覆盖新页内容；
• ‌选项卡切换‌：多个选项卡异步加载数据，返回顺序混乱导致界面错乱。

2. 前端解决方案与代码示例

方法1：取消旧请求（AbortController）

通过 AbortController 终止未完成的旧请求，仅保留最新请求：

let controller = null;

async function fetchData(keyword) {
  // 终止未完成的旧请求
  if (controller) controller.abort(); 
  controller = new AbortController();

  try {
    const response = await fetch(`/api/search?q=${keyword}`, {
      signal: controller.signal
    });
    const data = await response.json();
    // 更新界面
  } catch (err) {
    if (err.name !== 'AbortError') console.error(err);
  }
}

方法2：唯一请求标识符

为每个请求生成唯一ID，响应时校验是否匹配当前最新ID：

let latestRequestId = 0;

async function fetchData(keyword) {
  const currentRequestId = ++latestRequestId;
  const response = await fetch(`/api/search?q=${keyword}`);
  const data = await response.json();

  // 仅处理最新请求的响应
  if (currentRequestId === latestRequestId) {
    // 更新界面
  }
}

方法3：队列化请求（Async Chain）

使用 Promise 链式调用确保请求顺序执行：

let requestQueue = Promise.resolve();

function sendSequentialRequest(url) {
  requestQueue = requestQueue.then(async () => {
    const response = await fetch(url);
    return response.json();
  });
  return requestQueue;
}

// 调用示例
sendSequentialRequest('/api/page1');
sendSequentialRequest('/api/page2');

四、总结

‌核心思路 ‌：Race Condition的核心解决思路是‌消除共享资源的无序访问‌。需根据具体场景选择同步机制（如锁）、时序控制（如中断请求）或数据管理（如不可变结构），并结合原子操作和业务逻辑优化综合处理。

‌选型建议‌：

• 高频触发场景（如搜索框）优先使用 AbortController；
• 需严格顺序的场景（如分页）选择队列化请求；
• 简单交互场景可用唯一标识符实现轻量控制。