谈谈Javascript异步代码优化 (2)

Generator中遇到yield的地方会进行暂停,所以我们需要手动调用next方法往下,next返回值的 value 属性便是我们需要的数据,这里是fetch方法返回的Promise对象,所以我们需要使用then回调,最后再调用g.next(data)结束并输出数据。

Generator 函数的缺点在于,我们每一次执行yield语句都需要手动进行next,不是很方便。

4. co

为了解决上方Generator函数需手动执行next方法的问题,TJ Holowaychuk大神编写了一个co函数库,能够使Generator 函数可以自动执行,比如原来我们需要这样:

let files = function* (){ var f1 = yield readFile('/xxx/xxx'); // 读取file1文件 var f2 = yield readFile('/xxx/xxx'); // 读取file2文件 console.log(f1.toString()); console.log(f2.toString()); }; files.next(); // 执行yield files.next(); // 执行yield

使用co后:

var co = require('co'); co(files);

co 函数返回一个 Promise 对象,因此可以用 then 方法添加回调函数。

co(files).then(() => { console.log('执行完成'); });

最后我们可以看到我们没有手动执行next方法,也会打印出所读取的文件。

co模块虽然很好的帮助了我们解决了Generator函数必须靠执行器的问题,但是使用起来我们都需要额外引入一个模块,那么有没有更加方便的方式来解决呢?继续往下看。

5. async and await

除了以上4中方式可以解决Javascript异步编程的问题外,ES7还提供了更加方便的async 函数和await命令,了解一下?

其实async是 Generator 函数的语法糖,不同点在于其内置了执行器,也就是说async函数自带执行器。看一下下面的例子:

let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000); }); let p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve(2); }, 1000); }); async function waitFn() { let a = await p1; // await命令后面可以是 Promise 对象和原始类型的值,如果使原始类型最终也会返回为Promise对象 let b = await p2; return a + b } // async函数的返回值是 Promise 对象, 可以用then方法指定下一步的操作 waitFn().then(result => { console.log(result); // 2s后输出3 });

async函数内部return语句返回的值,会成为then方法回调函数的参数。因此这就像极了利用co包裹起来的Generator函数,只是把*替换成了async,把yield替换成了await。

可以说async and await 是ES7中最重要的一个特性,虽然其也存在一些弊端,但是相比较而言用其处理异步代码来说还是比较得心应手的。

结语

本文简单介绍了处理好Javascript异步代码的五种常见方式,每一种方式都有其使用和存在的条件和必要性,有兴趣的同学可以对其进行单独的拓展和探究,只有了解并掌握每一种方式各自的优点并加以运用,才能享受异步编程带来的快感。

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

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