简介
Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。
Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。
执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。
形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号
;二是,函数体内部使用yield
表达式,定义不同的内部状态(yield在英语里的意思就是“产出”)。
方法
-
Generator.prototype.next()
yield表达式本身没有返回值,或者说总是返回undefined。next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值。 -
Generator.prototype.return()
方法返回给定的值并结束生成器。 -
Generator.prototype.throw()
方法用来向生成器抛出异常,并恢复生成器的执行,返回带有 done 及 value 两个属性的对象。
yield表达式
yield表达式与return语句既有相似之处,也有区别。相似之处在于,都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield,函数暂停执行,下一次再从该位置继续向后执行,而return语句不具备位置记忆的功能。一个函数里面,只能执行一次(或者说一个)return语句,但是可以执行多次(或者说多个)yield表达式。正常函数只能返回一个值,因为只能执行一次return;Generator 函数可以返回一系列的值,因为可以有任意多个yield。从另一个角度看,也可以说 Generator 生成了一系列的值,这也就是它的名称的来历(英语中,generator 这个词是“生成器”的意思)。
语法注意点:
1.yield表达式只能用在 Generator 函数里面
2.yield表达式如果用在另一个表达式之中,必须放在圆括号里面
3.yield表达式用作函数参数或放在赋值表达式的右边,可以不加括号。
例如
function* demo() {
foo(yield 'a', yield 'b'); // OK
let input = yield; // OK
}
例子
- 最基础的Generator代码
function* Hello() {
yield 100
yield (function () {return 200})()
return 300
}
var h = Hello()
console.log(typeof h) // object
console.log(h.next()) // { value: 100, done: false }
console.log(h.next()) // { value: 200, done: false }
console.log(h.next()) // { value: 300, done: true }
console.log(h.next()) // { value: undefined, done: true }
- 下面看看如何使用 Generator 函数,执行一个真实的异步任务。
function* gen() {
var url = 'https://api.github.com/users/github';
var result = yield fetch(url);
console.log("result", result);
}
var g = gen();
var result = g.next();
result.value.then(function (data) {
return data.json();
}).then(function (data) {
g.next(data);
});
网友评论