如何按Promise的兑现顺序遍历多个Promise或生成对应的可迭代对象？

这个需求太常见了！你要的不是Promise.all（等待所有Promise完成）也不是Promise.race（仅获取第一个完成的Promise），而是按Promise实际完成的顺序逐个处理结果的能力——也就是把一堆Promise转换成一个异步可迭代对象，用for await...of循环就能依次等待下一个完成的任务，触发对应的动作。

我给你一个基于ES2018异步生成器的实现，简洁易懂且直接可用：

核心实现代码 #

async function* iteratePromisesInCompletionOrder(promises) {
  // 把每个原始Promise包装成一个会捕获结果/错误的Promise，方便后续统一处理
  const wrappedPromises = promises.map(promise => 
    new Promise(resolve => {
      promise
        .then(result => resolve({ success: true, value: result }))
        .catch(error => resolve({ success: false, error }));
    })
  );

  let remainingPromises = [...wrappedPromises];
  while (remainingPromises.length > 0) {
    // 每次获取当前剩余Promise中第一个完成的
    const settled = await Promise.race(remainingPromises);
    // 移除已经完成的Promise，避免下次重复处理
    remainingPromises = remainingPromises.filter(p => p !== settled);
    
    // 根据结果是成功还是失败，决定返回值或抛出错误
    if (settled.success) {
      yield settled.value;
    } else {
      throw settled.error;
    }
  }
}

用法示例 #

结合你的场景，假设myAsyncFn是一个返回随机延迟Promise的异步函数：

// 模拟一个随机完成时间的异步任务
function myAsyncFn(x) {
  return new Promise(resolve => {
    setTimeout(() => resolve(`任务${x}完成`), Math.random() * 2000);
  });
}

async function processTasks() {
  const myarr = [1, 2, 3, 4];
  const promises = myarr.map(x => myAsyncFn(x));
  
  // 按完成顺序逐个处理结果
  for await (const result of iteratePromisesInCompletionOrder(promises)) {
    console.log("触发动作：", result);
    // 这里写你要在每个Promise兑现后执行的逻辑
  }
}

processTasks();

关键说明 #

• 错误处理：上面的实现会在Promise reject时抛出错误，如果你想忽略错误或者单独处理，可以把throw settled.error改成yield settled.error，然后在循环里判断结果类型。
• 性能优化：上面的实现用了filter来移除已完成的Promise，对于少量Promise完全够用；如果处理大量Promise，可以用Set来跟踪已完成的Promise，提升删除效率。
• 兼容性：异步生成器（async function*）和for await...of是ES2018的特性，现代浏览器和Node.js 10+都支持，如果需要兼容旧环境，可以用手动迭代器的方式实现（原理类似，只是语法更繁琐）。

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