异步生成器类卡在无限循环javascript上

Question

我正在尝试让以下异步生成器工作：

class MyIterator {
  constructor(m) {
    this.collection = m;
  }

   async *[Symbol.iterator]() {
      for (let item of this.collection) {
        const resultItem = await Promise.resolve(item)
        console.log("item: ", resultItem)
        yield resultItem
      }
  }
}
(async () => {
  const iterator = new MyIterator([1,2,3])
  let times = 0
  for await (let thing of iterator) {
    console.log("thing: ", thing)

    // this is here to avoid an infinite loop
    times++
    if (times > 1000) break
  }
})()

但它最终会陷入无限循环，并且thing 始终未定义。

item: 1
thing: undefined
item: 2
thing: undefined
item: 3
thing: undefined (x999)

---

我尝试了类似的代码，但这次没有 Promise/async 行为，而且它似乎工作得很好。

class MyIterator {
  constructor(m) {
    this.collection = m;
  }

   *[Symbol.iterator]() {
      for (let item of this.collection) {
        console.log("item: ", item)
        yield item
      }
  }
}

const iterator = new MyIterator([1,2,3])
for (let thing of iterator) {
  console.log("thing: ", thing)
}

item: 1
thing: 1
item: 2
thing: 2
item: 3
thing: 3

Answer 1

for await..of 构造将尝试迭代异步迭代器。

使用@@asyncIterator well-known symbol 定义异步迭代器：

class MyIterator {
  constructor(m) {
    this.collection = m;
  }

   async *[Symbol.asyncIterator]() { //<-- this is async
      for (let item of this.collection) {
        const resultItem = await Promise.resolve(item)
        //console.log("item: ", resultItem)
        yield resultItem
      }
  }
}
(async () => {
  const iterator = new MyIterator([1,2,3])
  let times = 0
  for await (let thing of iterator) {
    //no infinite loop
    console.log("thing: ", thing) 
  }
})()

for await..of 也可以使用产生承诺的普通迭代：

const promiseArray = [Promise.resolve("a"), Promise.resolve("b"), Promise.resolve("c")];

(async function() {
  for await(const item of promiseArray) {
    console.log(item);
  }
})()

尝试创建作为异步方法/函数的常规迭代器不起作用。

如果您想保留 @@iterator 定义的方法，最好的选择是让它产生 Promise：

class MyIterator {
  constructor(m) {
    this.collection = m;
  }

   *[Symbol.iterator]() { // not async
      for (let item of this.collection) {
        yield Promise.resolve(item); //produce a promise
      }
  }
}
(async () => {
  const iterator = new MyIterator([1,2,3])
  let times = 0
  
  for await (let thing of iterator) {
    console.log("thing: ", thing)
  }
})()

不过，如果有任何承诺被拒绝，那就是 might be a bad practice：

const wait = (ms, val) =>
  new Promise(res => setTimeout(res, ms, val));
const fail = (ms, val) =>
  new Promise((_, rej) => setTimeout(rej, ms, val));
  
const arr = [ 
  wait(100, 1), 
  wait(150, 2), 
  fail(0, "boom"), 
  wait(200, 3)
];

(async function(){
  try {
    for await (const item of arr) {
      console.log(item);
    }
  } catch (e) {
    console.error(e);
  }
})()


/* result in the browser console:

Uncaught (in promise) boom
1
2
boom
*/

但是，请注意，它们之间的语义有所不同：

• 常规迭代器产生一个 IteratorResult - 一个具有value 和done 属性的对象。

const syncIterable = {
  [Symbol.iterator]() {
    return {
      next() {
        return {value: 1, done: true}
      }
    }
  }
}

const syncIterator = syncIterable[Symbol.iterator]();
console.log("sync IteratorResult", syncIterator.next());

• 异步生成器为 IteratorResult 生成 promise

const asyncIterable = {
  [Symbol.asyncIterator]() {
    return {
      next() {
        return Promise.resolve({value: 2, done: true});
      }
    }
  }
}

const asyncIterator = asyncIterable[Symbol.asyncIterator]();
asyncIterator.next().then(result => console.log("async IteratorResult", result));

• 最后，产生 Promise 的迭代器将有一个 IteratorResult，其中 value 是一个 Promise：

const promiseSyncIterable = {
  [Symbol.iterator]() {
    return {
      next() {
        return {value: Promise.resolve(3), done: true}
      }
    }
  }
}

const promiseSyncIterator = promiseSyncIterable[Symbol.iterator]();
const syncPromiseIteratorResult = promiseSyncIterator.next();

console.log("sync IteratorResult with promise", syncPromiseIteratorResult);
syncPromiseIteratorResult.value
  .then(value => console.log("value of sync IteratorResult with promise", value));

---

关于命名的旁注：MyIterator 不是迭代器。 iterator 是一个带有next() 方法的对象，它产生一个IteratorResult。可以迭代的对象有一个@@iterator（或@@asyncIterable）方法，它被称为iterable（或async iterable）。

Answer 2

正如@VLAZ 在对我的问题的评论中指出的那样，我使用的是Symbol.iterator 而不是Symbol.asyncIterator。以下实现按预期工作：

class MyIterator {
  constructor(m) {
    this.collection = m;
  }

   async *[Symbol.asyncIterator]() {
      for (let item of this.collection) {
        const resultItem = await Promise.resolve(item)
        console.log("item: ", resultItem)
        yield resultItem
      }
  }
}
(async () => {
  const iterator = new MyIterator([1,2,3])
  for await (let thing of iterator) {
    console.log("thing: ", thing)
  }
})()