如何实现多次调用的save函数返回所有AJAX请求完成后resolve的Promise

这是个很常见的异步场景——处理多次触发的保存请求，需要统一控制加载提示的显示/隐藏，同时让每个save调用返回的Promise，必须等所有未完成的保存请求都结束才resolve。直接用Promise.all确实行不通，因为新请求可能在已有请求完成前发起，请求队列是动态变化的。

下面是完整的实现思路和代码：

核心思路 #

• 维护pending请求队列：用数组追踪所有未完成的save请求Promise，实时更新队列状态。
• 精准控制加载提示：当队列从空变为非空时显示提示，当最后一个请求完成、队列彻底清空时隐藏提示。
• 聚合Promise返回：让每个save调用返回的Promise，都绑定到同一个“所有请求完成”的信号上，确保不管请求发起顺序如何，都能等待全部任务结束才resolve。

完整代码实现 #

// 全局维护未完成的请求队列
let pendingPromises = [];
// 追踪所有请求完成的信号Promise
let allSaveDonePromise = Promise.resolve();
// 用于触发所有请求完成的resolve函数
let resolveAllSaveDone;

// 模拟真实的AJAX保存请求，实际项目中替换成你的fetch/axios请求
function ajaxSave(index, delay = 2000) {
  return new Promise((resolve) => {
    console.log(`[请求开始] 保存任务 ${index}`);
    setTimeout(() => {
      console.log(`[请求完成] 保存任务 ${index}`);
      resolve(`保存结果：任务${index}完成`);
    }, delay);
  });
}

function save(index, delay = 2000) {
  // 创建当前请求的Promise
  const currentRequest = ajaxSave(index, delay);
  
  // 将当前请求加入pending队列
  pendingPromises.push(currentRequest);

  // 当队列刚从空变为非空时，显示保存提示并创建新的完成信号Promise
  if (pendingPromises.length === 1) {
    console.log('✅ 显示保存中提示（比如加载动画/文字）');
    // 实际项目中替换成DOM操作：
    // document.getElementById('save-loading').style.display = 'block';
    
    // 创建新的信号Promise，等待队列清空时触发resolve
    allSaveDonePromise = new Promise(resolve => {
      resolveAllSaveDone = resolve;
    });
  }

  // 当前请求完成后，从队列中移除它，并检查是否需要隐藏提示
  currentRequest.finally(() => {
    // 用filter移除已完成的请求（因为并发请求完成顺序可能和加入顺序不一致）
    pendingPromises = pendingPromises.filter(promise => promise !== currentRequest);
    
    // 如果队列已空，触发完成信号并隐藏提示
    if (pendingPromises.length === 0) {
      console.log('❌ 隐藏保存中提示');
      // 实际项目中替换成DOM操作：
      // document.getElementById('save-loading').style.display = 'none';
      
      // 这里可以传入最后一个完成的结果，或者所有结果数组，按需调整
      resolveAllSaveDone('所有保存任务已完成');
    }
  });

  // 返回全局的完成信号Promise，确保所有请求完成后才resolve
  return allSaveDonePromise;
}

// 测试示例：模拟多次触发save
async function testSaveFlow() {
  console.log('=== 开始测试 ===');
  
  // 第一次调用save，延迟3秒
  const save1Promise = save(1, 3000);
  
  // 1秒后调用第二次save，延迟1秒
  setTimeout(() => {
    const save2Promise = save(2, 1000);
    save2Promise.then(res => console.log('save2返回结果:', res));
  }, 1000);
  
  // 2秒后调用第三次save，延迟500毫秒
  setTimeout(() => {
    const save3Promise = save(3, 500);
    save3Promise.then(res => console.log('save3返回结果:', res));
  }, 2000);
  
  // 等待第一个save的Promise完成（此时所有请求都已结束）
  const finalResult = await save1Promise;
  console.log('所有保存任务完成，最终结果:', finalResult);
}

testSaveFlow();

关键细节解释 #

• 队列清理用filter而非shift：并发请求的完成顺序不一定和发起顺序一致，用引用匹配过滤已完成的Promise，能确保队列状态始终准确。
• 全局完成信号Promise：每次队列从空变非空时，会创建一个新的信号Promise，所有save调用返回的都是这个Promise，确保不管什么时候调用save，都会等待所有pending请求结束才resolve。
• 提示状态的精准控制：只有当队列从空变为非空时才显示提示，只有当队列彻底清空时才隐藏提示，避免频繁切换提示状态带来的闪烁问题。

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