如何在for await...of遍历异步生成器后获取其返回的最终值？

这个问题我之前也碰到过！for await...of确实用着顺手，但它有个容易踩的小坑——会自动忽略异步生成器的return返回值：循环一旦检测到生成器返回done: true的状态，就直接终止，不会把这个最终值暴露出来。而且等循环结束后你再调用generator.next()，生成器已经彻底跑完进入完成状态，自然拿不到任何有效内容了。

下面给你两种解决方案，既能拿到返回值，又尽量保持代码的简洁性：

方法一：手动迭代（直接清晰，贴近原生循环逻辑） #

如果不想放弃循环的直观感，其实可以自己模拟for await...of的底层逻辑，这样就能在生成器结束时顺手接住返回值，代码改动也很小：

async function main() {
  const generator = exampleGenerator();
  let finalValue;

  while (true) {
    const { value, done } = await generator.next();
    if (done) {
      finalValue = value; // 接住生成器的返回值
      break;
    }
    // 原来for循环里的处理逻辑完全不变
    console.log(value); // 输出1, 2, 3...
  }

  console.log(finalValue); // 这里就能拿到'finished'了！
}

这个写法和原生for await...of的执行逻辑完全一致，只是把迭代过程手动写了出来，代价几乎为零，却能直接拿到返回值。

方法二：包装生成器（完全保留for await...of的简洁语法） #

如果你特别想用for await...of的原生语法，不想动循环结构，可以给生成器做个简单的包装，让它把返回值临时存起来，循环结束后直接取就行：

// 包装函数：把生成器的返回值存到自身属性上
async function* trackReturn(genFn) {
  const iterator = genFn();
  let returnValue;
  try {
    while (true) {
      const { value, done } = await iterator.next();
      if (done) {
        returnValue = value;
        break;
      }
      yield value;
    }
  } finally {
    // 将返回值挂载到包装函数上
    trackReturn.returnValue = returnValue;
  }
}

// 使用时和原生for循环几乎没有区别
async function main() {
  const trackedGenerator = trackReturn(exampleGenerator);
  
  for await (const value of trackedGenerator) {
    console.log(value); // 还是原来的处理逻辑
  }

  // 循环结束后直接获取返回值
  console.log(trackReturn.returnValue); // 输出'finished'
}

这个方法需要提前写一个简单的包装函数，但之后用起来就和原生for await...of一样顺手，完全不用修改循环内部的代码。

再补个原理说明，帮你彻底搞懂 #

for await...of的底层是反复调用生成器的next()方法：每次拿到done: false的结果时，就把value交给循环体处理；一旦拿到done: true的结果，循环就直接终止，并且会丢弃这个结果里的value。这时候生成器已经处于完成状态，你再调用next()，它只会返回{ value: undefined, done: true }，这就是你原来的代码拿不到返回值的原因。

备注：内容来源于stack exchange，提问作者Ron Zano