ECMAScript 6 之Generator

查看更多文章: https://alili.tech

Generator的基本使用

Generator是ES6提供的一种异步解决方案.他能干什么呢?

能具体解决我们什么样的问题呢?

比如说,我想做一件事情,但是必须要求有两个ajax完成后才能做.

比如:

$http.get('请求1').success(function(){
  $http.get('请求2').success(function(){
  //  do something ...
  })
})

这样做的话,就要一层一层的嵌套,当请求更多的时候,代码会写的非常的乱.

现在我们有了Generator,我们该怎么做呢?

function* getData(){
  yield $http.get('请求1').success(function(){
  //  do something ...
  g.next();
  });

  yield $http.get('请求2').success(function(){
  //  do something ...
  g.next();
  });

  //最终要做的事情

}
var g =getData();
g.next();

就这样,我们把必须要嵌套的异步操作,写成了"同步".

上面的函数,有三个关键的地方:

1.function 后面多了一个 *

2.函数里多了一个yield 关键字

3.函数执行后,会有一个next方法;

Generator的基本使用,就是在这三个关键的地方.

---

关于Generator的运行过程是这样子的:

1.在function后面加一个*,表示申明了一个Generator函数.

2.当Generator函数运行后,会实例出一个Generator对象.
这个Generator对象下会有一个next方法.

3.当我们运行next方法的时候,才能真正运行Generator函数里真正的内容.

4.当执行Generator函数的时候,碰到了yield,函数会暂停一次.

5.当下一次运行next方法的时候,Generator函数会从上一次暂停的地方继续执行.

---

yield

yield关键字与return很像,会返回相应的东西.

他们的区别在于:

yield是暂停函数的运行,必须要在Generator函数里使用.

return是终止函数的运行,任何地方都能使用

---

公众号“ Alili丶前端大爆炸”，关注后提供海量学习资料