使用生成器函数处理异步操作

发表于 更新于 分类于 阅读次数：

yield是TypeScript（以及JavaScript）中的一个关键字，主要在一个生成器函数中使用。生成器函数是ES6引入的一种特殊类型的函数，它可以在执行过程中被暂停和恢复。

使用yield的生成器函数的特点是：函数体内可以使用yield表达式，返回一个迭代器，每次调用迭代器的next方法，函数会运行到下一个yield表达式处，yield后面的表达式的值，就是返回对象的value属性值。

基础用法

下面是一个基本的例子，用来生成一个简单的数字序列：

1
2
3
4
5
6
7
8
9
10
11
12
function* numberGenerator() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const gen = numberGenerator();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
// 这可以一直执行下去

在上面的例子中，每次调用gen.next()时，生成器函数就会从上次暂停的地方开始运行，直到遇到下一个yield表达式。然后，它将返回一个对象，该对象的value属性值等于yield后面的表达式的值。

产出值和接收值

生成器函数还有一个很有用的特性：它们不仅可以产出（yield）值，还可以接收值。当你调用next()方法并传入一个参数时，该参数会成为上一个yield表达式的值。看下面的例子：

1
2
3
4
5
6
7
8
9
10
function* dialog() {
  const name = yield "What is your name?";
  const job = yield `Hello, ${name}! What is your job?`;
  return `${job}, that sounds interesting!`;
}

const gen = dialog();
console.log(gen.next().value);       // What is your name?
console.log(gen.next("Alice").value); // Hello, Alice! What is your job?
console.log(gen.next("Engineer").value); // Engineer, that sounds interesting!

在这个例子中，当我们调用gen.next("Alice")时，"Alice"这个值被发送给生成器，赋值给name变量。同样地，当我们调用gen.next("Engineer")时，"Engineer"被发送给生成器，赋值给job变量。这就是生成器函数的接收值功能。

使用场景

生成器在处理流式数据或大型集合等情况下很有用。它们可以用于创建只在需要时计算其元素的数据结构（懒计算），处理异步操作等。

请注意，这只是关于yield和生成器函数的基本介绍。这是一个复杂且强大的特性，有很多更高级的用法和技巧，需要进一步学习和实践。