javascript - 将 ES6 生成器与 XMLHttpRequest 结合使用

Question

我正在尝试简化使用 ES6 生成器进行 AJAX 调用的方式。但是，我遇到了一些问题:

let xhr = new XMLHttpRequest()

function *statechange() {
    yield xhr.readyState;
}

let gen = statechange();

xhr.open("GET", myUrl, true);
xhr.onreadystatechange = function() {console.log(gen.next())};
xhr.send();

只是对我想要做的事情的简要解释:我想产生每个请求状态更改的就绪状态。我在生成器的每次迭代中记录 readyState 字符串。但是当我运行这段代码时，我得到:

{value: 2, done: false}
{value: undefined, done: true}
{value: undefined, done: true}

表面上看起来不错，但如果我做一个老式的 XHR:

//... new XMLHttpRequest()...
xhr.onreadystatechange = function() {console.log(xhr.readyState)}

我得到:

2
3
4

那么...我在使用生成器时哪里出了问题？

---

更新:

更奇怪的是，如果我在生成器中记录 readyState:

//                                                     HERE
xhr.onreadystatechange = function() {console.log(xhr.readyState, gen.next())};

我明白了:

2, {value: 2, done: false}
3, {value: undefined, done: true}
4, {value: undefined, done: true}

这意味着，当调用 next() 方法时，正确的 readyState 可用。我只能猜测我使用的 yield 语句只注册一次，因此生成器只分配一个槽。我认为由于 onreadystatechange 被多次调用，因此会分配更多的插槽。我该如何解决这个问题？

Answer 1

当您“调用”生成器函数时，它会运行直到第一个 yield 语句，然后暂停，直到调用它的 next 方法。此后，它继续运行，直到另一个 yield 语句发生或函数或控件离开函数。在后一种情况下，对 next 方法的所有调用都将返回 undefined。

您想要的是一个在每次迭代时检查 xhr 的 readyState 的循环:

function *statechange() {
  while(true) { // loop forever
    yield xhr.readyState;
  }
}

如果您熟悉 Python 中的生成器，这完全一样。

我要赞同 @Paul S. 的评论，即这并没有真正简化 xhrs，您应该查看相关 promise 。