RxJS：多动态输入框的Ajax请求排队与同输入旧请求取消

这问题我之前做实时搜索功能的时候刚好碰到过，踩过几个坑后整理出一套可行的方案——既要保证请求串行不挤爆服务器，又要能及时作废同输入框的旧请求，避免显示过期结果。咱们一步步拆解来实现：

核心需求拆解 #

先明确两个必须实现的关键点：

• 请求串行执行：同一时间只向服务器发送一个请求，必须等前一个请求拿到响应后，再发起下一个
• 同输入框旧请求作废：如果某个输入框触发了新请求，队列里它的未完成旧请求要直接取消，不用等服务器返回无效结果

下面我用JavaScript结合Axios来实现（原生XHR也能做，但Axios的取消令牌用起来更顺手）：

1. 准备核心状态变量 #

首先要维护几个关键的全局状态，用来管理队列和请求：

// 存储待执行的请求任务，每个任务包含输入框标识、执行函数、取消函数
const requestQueue = [];
// 记录每个输入框当前的未完成请求（key: 输入框唯一标识, value: Axios取消令牌）
const activeRequests = new Map();
// 标记是否正在执行请求，避免重复启动队列处理逻辑
let isProcessing = false;

2. 封装请求处理核心函数 #

这个函数会负责：取消旧请求、添加新任务到队列、自动启动队列执行

function handleInputRequest(inputId, requestFn) {
  // 第一步：取消当前输入框的旧请求（如果存在）
  if (activeRequests.has(inputId)) {
    const cancelToken = activeRequests.get(inputId);
    cancelToken.cancel(`输入框${inputId}触发新请求，旧请求已取消`);
    activeRequests.delete(inputId);
    
    // 顺便移除队列里该输入框的旧任务（如果还没执行）
    const oldTaskIndex = requestQueue.findIndex(task => task.inputId === inputId);
    if (oldTaskIndex !== -1) {
      requestQueue.splice(oldTaskIndex, 1);
    }
  }

  // 第二步：创建新的取消令牌，绑定到当前输入框
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();

  // 包装请求任务，包含必要的执行和取消逻辑
  const newTask = {
    inputId,
    execute: () => {
      return requestFn(source.token)
        .then(response => {
          // 这里写请求成功后的业务逻辑，比如更新输入框对应的结果
          console.log(`输入框${inputId}请求成功`, response.data);
        })
        .catch(error => {
          // 主动取消的请求不需要抛出错误提示
          if (!axios.isCancel(error)) {
            console.error(`输入框${inputId}请求失败`, error);
          }
        })
        .finally(() => {
          // 请求完成（无论成功失败），清理活跃请求记录，启动下一个任务
          activeRequests.delete(inputId);
          processNextTask();
        });
    },
    cancel: () => source.cancel()
  };

  // 第三步：把新任务加入队列，记录活跃请求
  requestQueue.push(newTask);
  activeRequests.set(inputId, source);

  // 第四步：如果队列还没在执行，立即启动处理
  if (!isProcessing) {
    processNextTask();
  }
}

3. 实现队列串行执行逻辑 #

这个函数负责依次取出队列中的任务执行，保证串行顺序：

function processNextTask() {
  // 如果队列空了，标记为未执行状态，结束流程
  if (requestQueue.length === 0) {
    isProcessing = false;
    return;
  }

  // 标记为正在执行，取出队列第一个任务执行
  isProcessing = true;
  const nextTask = requestQueue.shift();
  nextTask.execute();
}

4. 绑定到动态输入框 #

假设你的动态输入框是通过data-input-id来标记唯一身份的，用事件委托绑定input事件即可：

<!-- 动态生成的输入框示例 -->
<input type="text" class="dynamic-input" data-input-id="input-1">
<input type="text" class="dynamic-input" data-input-id="input-2">
<!-- 更多动态新增的输入框... -->

// 用事件委托处理动态生成的输入框事件
document.addEventListener('input', (e) => {
  if (e.target.classList.contains('dynamic-input')) {
    const inputId = e.target.dataset.inputId;
    const inputValue = e.target.value.trim();

    // 这里定义你的实际请求逻辑，比如发送搜索请求
    const requestFn = (cancelToken) => {
      return axios.get('/api/search', {
        params: { keyword: inputValue },
        cancelToken: cancelToken
      });
    };

    // 调用咱们的请求处理函数
    handleInputRequest(inputId, requestFn);
  }
});

关键细节说明 #

• 输入框唯一标识：必须给每个动态输入框分配唯一的data-input-id，这样才能准确追踪对应的请求
• 取消令牌的作用：Axios的CancelToken能主动终止未完成的请求，避免服务器返回无效的旧数据
• 队列清理逻辑：每次新请求加入前，必须清理该输入框的旧任务和旧请求，保证队列里只有最新的任务
• 串行执行控制：用Promise的finally钩子触发下一个任务，确保前一个请求完全结束后才会执行下一个

这个方案不管你有多少个动态输入框，都能稳定处理请求排队和旧请求取消的需求，逻辑清晰也容易扩展~

内容的提问来源于stack exchange，提问作者dsto