ES6 javascript的异步操作实例详解(2)

协程遇到yield命令就暂停, 等到执行权返回, 再从暂停的地方继续往后执行。 它的最大优点, 就是代码的写法非常像同步操作, 如果去除 yield 命令,简直一模一样。

2. Generator 函数的概念

enerator 函数是协程在 ES6 的实现, 最大特点就是可以交出函数的执行权( 即暂停执行)。

整个 Generator 函数就是一个封装的异步任务, 或者说是异步任务的容器。 异步操作需要暂停的地方, 都用yield语句注明。 Generator 函数的执行方法

如下。

function* gen(x) { var y = yield x + 2; return y; } var g = gen(1); g.next() // { value: 3, done: false } g.next() // { value: undefined, done: true }

上面代码中, 调用 Generator 函数, 会返回一个内部指针( 即遍历器) g。 这是 Generator 函数不同于普通函数的另一个地方, 即执行它不会返回结果, 返回的是指针对象。 调用指针 g 的 next 方法, 会移动内部指针( 即执行异步任务的第一段), 指向第一个遇到的 yield 语句, 上例是执行到x + 2 为止。

换言之, next 方法的作用是分阶段执行 Generator 函数。 每次调用 next 方法, 会返回一个对象, 表示当前阶段的信息( value 属性和 done 属性)。 value属性是 yield 语句后面表达式的值, 表示当前阶段的值; done 属性是一个布尔值, 表示 Generator 函数是否执行完毕, 即是否还有下一个阶段。

3. Generator 函数的数据交换和错误处理

Generator 函数可以暂停执行和恢复执行, 这是它能封装异步任务的根本原因。 除此之外, 它还有两个特性, 使它可以作为异步编程的完整解决方案:函数体内外的数据交换和错误处理机制。

next 方法返回值的 value 属性, 是 Generator 函数向外输出数据; next 方法还可以接受参数, 这是向 Generator 函数体内输入数据。

function* gen(x) { var y = yield x + 2; return y; } var g = gen(1); g.next() // { value: 3, done: false } g.next(2) // { value: 2, done: true }

上面代码中, 第一个 next 方法的 value 属性, 返回表达式x + 2 的值( 3)。 第二个 next 方法带有参数 2, 这个参数可以传入 Generator 函数, 作为上个阶段异步任务的返回结果, 被函数体内的变量 y 接收。 因此, 这一步的 value 属性, 返回的就是 2( 变量 y 的值)。

Generator 函数内部还可以部署错误处理代码, 捕获函数体外抛出的错误。

function* gen(x) { try { var y = yield x + 2; } catch(e) { console.log(e); } return y; } var g = gen(1); g.next(); g.throw(' 出错了 ');

上面代码的最后一行, Generator 函数体外, 使用指针对象的throw 方法抛出的错误, 可以被函数体内的try...catch 代码块捕获。 这意味着, 出错的代码与处理错误的代码, 实现了时间和空间上的分离, 这对于异步编程无疑是很重要的。

4. 异步任务的封装

下面看看如何使用 Generator 函数, 执行一个真实的异步任务。

var fetch = require('node-fetch'); function* gen() { var url = 'https://api.github.com/users/github'; var result = yield fetch(url); console.log(result.bio); }

上面代码中, Generator 函数封装了一个异步操作, 该操作先读取一个远程接口, 然后从 JSON 格式的数据解析信息。 就像前面说过的, 这段代码非常像同步操作, 除了加上了 yield 命令。

执行这段代码的方法如下。

var g = gen(); var result = g.next(); result.value.then(function(data) { return data.json(); }).then(function(data) { g.next(data); });

上面代码中, 首先执行 Generator 函数, 获取遍历器对象, 然后使用 next 方法( 第二行), 执行异步任务的第一阶段。 由于 Fetch 模块返回的是一个Promise 对象, 因此要用 then 方法调用下一个 next 方法。

可以看到, 虽然 Generator 函数将异步操作表示得很简洁, 但是流程管理却不方便( 即何时执行第一阶段、 何时执行第二阶段)。

更多相关内容可查看本站专题:《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《javascript面向对象入门教程

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wywddd.html