标签：png 函数 工作 知识 value cat 要求 fun com
Generator函数在工作中还没有用到过，一直在使用async，最近在看async的原理，发现它只是Generator的语法糖。
Generator的基础知识之前写过文章介绍过（https://www.cnblogs.com/wangtingnoblog/p/js_Generator.html），这里主要讨论一下怎么使用Generator函数来进行异步编程。
先来看下面的代码：
1 function* g() { 2 console.log(‘g start‘) 3 yield setTimeout(() => console.log(‘setTimeout‘), 3000) 4 console.log(‘g end‘) 5 } 6 const useg = g(); 7 useg.next(); 8 useg.next();
运行结果：
分析：
看下面的代码：
1 function* g() { 2 console.log(‘g start‘) 3 yield function(callBack) { 4 setTimeout(() => { 5 console.log(‘setTimeout‘) 6 callBack() 7 }, 3000) 8 } 9 console.log(‘g end‘) 10 } 11 const useg = g(); 12 const first = useg.next(); 13 first.value(() => useg.next());
运行结果：
分析：
我们再来看一下实际的例子，使用Generator函数封装ajax：
1 function* g() { 2 console.log(‘g start‘) 3 const userName = yield function(callBack) { 4 const xhr = new XMLHttpRequest(); 5 xhr.open(‘get‘, ‘http://localhost:3002/users?id=1‘, true); 6 xhr.responseType = ‘json‘; 7 xhr.setRequestHeader(‘Accept‘, ‘application/json‘); 8 xhr.onload = () => { 9 const data = xhr.response; 10 callBack(data[0].name); 11 } 12 xhr.send(null); 13 } 14 const families = yield function(callBack) { 15 const xhr = new XMLHttpRequest(); 16 xhr.open(‘get‘, `http://localhost:3002/family?name=${userName}`, true); 17 xhr.responseType = ‘json‘; 18 xhr.setRequestHeader(‘Accept‘, ‘application/json‘); 19 xhr.onload = () => { 20 const data = xhr.response; 21 callBack(data[0].families); 22 } 23 xhr.send(null); 24 } 25 console.log(families) 26 console.log(‘g end‘) 27 } 28 const useg = g(); 29 const first = useg.next(); 30 first.value( 31 (name) => { 32 const second = useg.next(name) 33 second.value( 34 (families) => useg.next(families) 35 ) 36 } 37 );
上面的代码执行的是：先通过id取得用户名，再通过用户名取得家庭成员。只看第1行到第27行，步骤清晰，很像是同步的写法。
我们需要关注的是，第28行到第37行对Generator函数的流程管理：
注意到这里的12345步是可以用迭代来进行的，修改流程管理的代码如下：
1 function run(g) { 2 // 取得迭代器 3 const useg = g(); 4 // 定义循环调用的函数 5 function loop(data) { 6 // 取得当前的值 7 const result = useg.next(data); 8 // 判断是否已经执行完成，执行完成会退出 9 if (result.done) return; 10 // 没有执行完成则继续执行回调 11 result.value(loop); 12 } 13 // 开始迭代 14 loop(); 15 } 16 run(g);
可以看到，使用迭代来管理流程时完全没有必要知道生成器的内部结构。而且这种方式也不管生成器中有多少个yield。
有一点需要注意的是，使用这种发生来管理流程要求生成器中yield后面的表达式必须是一个函数，且这个函数有唯一参数（回调函数）
其实，我们需要的只是在异步操作有了结果之后把执行权再交还给Generator函数继续执行。
问题是怎么知道异步操作有了结果？
上面已经介绍过使用回调函数来控制流程，它的限制是yield后面的表达式必须是一个以回调函数为参数的函数。
下面介绍使用Promise来控制流程：
ajax函数返回Promise
1 function ajax(url) { 2 return new Promise( 3 (resolve, reject) => { 4 const xhr = new XMLHttpRequest(); 5 xhr.open(‘get‘, url, true); 6 xhr.responseType = ‘json‘; 7 xhr.setRequestHeader(‘Accept‘, ‘application/json‘); 8 xhr.onload = () => { 9 const data = xhr.response; 10 resolve(data); 11 } 12 xhr.send(null); 13 } 14 ) 15 }
1 function* g() { 2 console.log(‘g start‘) 3 const userNameResponse = yield ajax(‘http://localhost:3002/users?id=1‘) 4 const familiesResponse = yield ajax(‘http://localhost:3002/family?name=‘ + userNameResponse[0].name) 5 console.log(familiesResponse[0].families) 6 console.log(‘g end‘) 7 } 8 const useg = g(); 9 useg.next().value.then( 10 (userNameResponse) => useg.next(userNameResponse).value.then( 11 (familiesResponse) => useg.next(familiesResponse) 12 ) 13 );
可以看到：
Promise迭代版本的流程控制：
function run(g) { // 取得迭代器 const useg = g(); // 定义循环调用的函数 function loop(data) { // 当前的值 const result = useg.next(data); // 判断是否已经执行完成，执行完成会退出 if (result.done) return; // 没有执行完成则继续执行回调 result.value.then(loop); } // 开始迭代 loop(); } run(g);
对比之前的使用回调函数来控制流程的代码，你会发现和使用Promise来控制流程的代码如此的类似。
使用Promise来控制流程需要注意的是yield后面必须是一个Promise对象
对比使用回调函数控制流程和使用Promise对象来控制流程
总结：
Generator函数本身使得异步操作看起来非常像同步操作，麻烦的是它的流程控制需要我们手动调用。（之后要讨论的async就是对Generator的进一步封装，不用开发者总结来流程控制）
另外上面的例子为了简化，都没有做异常处理，实际开发中，异常处理还是很有必要的。
2019-02-10
参考：《ES6标准入门》、《Learning TypeScript》、《深入理解ES6》
标签：png 函数 工作 知识 value cat 要求 fun com
原文地址：https://www.cnblogs.com/wangtingnoblog/p/js_Generator_async.html
