ES6基础知识(Generator 函数应用)

Posted xingxingclassroom

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6基础知识(Generator 函数应用)相关的知识,希望对你有一定的参考价值。

1.Ajax 是典型的异步操作,通过 Generator 函数部署 Ajax 操作,可以用同步的方式表达

function* main() {
  var result = yield request("http://some.url");
  var resp = JSON.parse(result);
    console.log(resp.value);
}

function request(url) {
  makeAjaxCall(url, function(response){
    it.next(response);
  });
}

var it = main();
it.next();

上面代码的main函数,就是通过 Ajax 操作获取数据。可以看到,除了多了一个yield,它几乎与同步操作的写法完全一样。注意,makeAjaxCall函数中的next方法,必须加上response参数,因为yield表达式,本身是没有值的,总是等于undefined

 

2.Generator 函数的一个重要实际意义就是用来处理异步操作,改写回调函数

function* loadUI() {
  showLoadingScreen();
  yield loadUIDataAsynchronously();
  hideLoadingScreen();
}
var loader = loadUI();
// 加载UI
loader.next()

// 卸载UI
loader.next()

上面代码中,第一次调用loadUI函数时,该函数不会执行,仅返回一个遍历器。下一次对该遍历器调用next方法,则会显示Loading界面(showLoadingScreen),并且异步加载数据(loadUIDataAsynchronously)。等到数据加载完成,再一次使用next方法,则会隐藏Loading界面。可以看到,这种写法的好处是所有Loading界面的逻辑,都被封装在一个函数,按部就班非常清晰。

 

3.利用 Generator 函数,可以在任意对象上部署 Iterator 接口

function* iterEntries(obj) {
  let keys = Object.keys(obj);
  for (let i=0; i < keys.length; i++) {
    let key = keys[i];
    yield [key, obj[key]];
  }
}

let myObj = { foo: 3, bar: 7 };

for (let [key, value] of iterEntries(myObj)) {
  console.log(key, value);
}

// foo 3
// bar 7

 

以上是关于ES6基础知识(Generator 函数应用)的主要内容,如果未能解决你的问题,请参考以下文章

ES6知识点-Generator

ES6中generator(生成器)函数的应用

ES6知识点整理之----Generator----概述

ES6之Generator 函数的异步应用

es6Generator 函数

ES6知识点整理之----Generator----异步