javascript - 了解 ES6 中的生成器函数

Question

我正在尝试了解 JS 生成器，但我不明白为什么下面的示例异步操作返回未定义。

我认为 yield 的全部意义在于等待异步调用完成。

function getUsers(){
	var users;
	$.ajax({
	  url: 'https://jsonplaceholder.typicode.com/users/'
	}).then(function(users) {
	  console.log(gen.next(users));
	});
	
}

function getPosts(){
	var posts;
	$.ajax({
	  url: 'https://jsonplaceholder.typicode.com/posts/'
	}).then(function(posts) {
	  console.log(gen.next(posts));
	});
}

function getComments(){
	var comments;
	$.ajax({
	  url: 'https://jsonplaceholder.typicode.com/comments/'
	}).then(function(comments) {
	  console.log(gen.next(comments));
	});
}

function* myGenerator() {
	var users = yield getUsers();
	var posts = yield getPosts();
	var comments = yield getComments();
	return ([users, posts, comments]);
}

var gen = myGenerator();
gen.next();

// {value: undefined, done: false}  ---> why undefined here?
// {value: undefined, done: false}  ---> why undefined here?
// {value: Array(3), done: true}    ---> YAY, array DOES contains expected data

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

有人能解释一下吗？谢谢!

Answer 1

因此，通过编辑，事情会有所不同。在除最后一种情况之外的每种情况下，您的生成器都会生成未定义的函数结果，因为您的函数不返回任何内容。

但是，当您从 then() 内部调用 next() 时，您会将 ajax Promise 的结果传递给生成器。生成器接收该值，并将其保存在变量中(users、posts 等)。但它仍然返回未定义，因为 yield getPosts() 的值未定义，因为该函数不返回任何内容。

最后一次调用 next() 发生在 getComments() 的 then() 中。现在生成器没有值，因此它返回 {done: true} 以及您异步放入变量中的值。它会返回这些内容并完成您的工作。

如果你这样做的话，这一切都会容易得多:

function getUsers(){
    return $.ajax({
      url: 'https://jsonplaceholder.typicode.com/users/'
    })
}

getUsers().then(console.log)