如何基于两个数组中存储的时间有序执行登录/登出AJAX请求

这个问题我之前也碰到过，批量并行发起请求确实容易把服务端或者客户端搞堵，给你一套清晰可行的解决方案：

我们需要先把两个操作数组合并排序，保证整体按时间顺序，同时同一账号的登录操作优先于登出操作；然后串行执行每个AJAX请求，彻底避免并发拥堵的问题。

步骤1：合并并标记操作类型 #

先把登录和登出数组合并，给每个操作加一个type字段，方便后续区分和排序：

// 合并两个数组，同时标记操作类型
const combinedOperations = [
  ...logins.map(login => ({ ...login, type: 'login' })),
  ...logouts.map(logout => ({ ...logout, type: 'logout' }))
];

步骤2：按规则排序操作 #

我们需要两个核心排序规则：

1. 整体按dateAdded的时间先后排序（早的操作在前）
2. 如果同一账号的操作时间接近，登录操作必须排在登出操作前面（符合业务逻辑，避免出现先登出后登录的异常顺序）

排序代码如下：

combinedOperations.sort((opA, opB) => {
  const timeA = new Date(opA.dateAdded).getTime();
  const timeB = new Date(opB.dateAdded).getTime();
  
  // 先按时间戳排序
  if (timeA !== timeB) {
    return timeA - timeB;
  }
  
  // 同一时间下，login 排在 logout 前面
  return opA.type === 'login' ? -1 : 1;
});

步骤3：串行执行AJAX请求 #

用async/await实现串行请求，确保上一个请求完成后再发起下一个，彻底解决并发拥堵问题。

首先封装你的AJAX请求为异步函数（替换成你实际的请求逻辑）：

// 替换成你自己的AJAX请求逻辑，这里用fetch做示例
async function syncOperation(operation) {
  const apiUrl = operation.type === 'login' 
    ? '/your-login-api-endpoint' 
    : '/your-logout-api-endpoint';
  
  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id: operation.id,
        dateAdded: operation.dateAdded
      })
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    console.log(`✅ ${operation.type} for user ${operation.id} synced successfully`);
    // 这里可以添加逻辑：把已同步的操作从原数组中移除，避免重复同步
    return response;
  } catch (err) {
    console.error(`❌ Failed to sync ${operation.type} for user ${operation.id}:`, err);
    // 可根据需求选择：抛出错误终止后续请求，或者返回错误继续执行
    // throw err; // 终止后续
    return err; // 继续执行
  }
}

然后循环执行所有操作：

async function syncAllOfflineOperations() {
  console.log('Starting offline operation sync...');
  
  for (const op of combinedOperations) {
    await syncOperation(op);
  }
  
  console.log('🎉 All offline operations synced!');
}

// 启动同步
syncAllOfflineOperations();

额外建议 #

• 错误处理：如果某个请求失败，你可以选择终止后续同步（避免无效请求），或者记录错误后继续执行，根据你的业务需求调整。
• 去重与清理：同步成功后，记得从logins和logouts数组中移除已完成的操作，防止下次重复同步。
• 进度反馈：可以给用户显示同步进度（比如“已完成3/5个操作”），提升体验。

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