Question

我试图围绕JS生成器，但我不明白为什么下面的示例异步操作返回undefined。

我认为收益的重点是等待异步调用完成。

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

因此，编辑工作有点不同。在除了最后一个之外的每种情况下，你的生成器都会产生你的函数的结果，因为你的函数没有返回任何东西。

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

next()的最后一次调用发生在then()的{{1}}。现在生成器没有值，因此它返回getComments()并且您异步放入变量的值。它返回那些和你完成的。

如果你刚才这样做会更容易：

{done: true}

Answer 2

我想我明白了，我开始明白这是如何有用的。我将getUsers包装在一个承诺中并立即获得预期值！谢谢你们。

＆＃13;

function getUsers(){
	return new Promise((resolve) => {
		$.ajax({
		  url: 'https://jsonplaceholder.typicode.com/users/'
		}).then(function(users) {
		  resolve(gen.next(users));
		});
	});
}

＆＃13;

了解ES6中的生成器功能

2 个答案: