JS async 函数的含义和用法实例总结

本文实例讲述了JS async 函数的含义和用法。分享给大家供大家参考，具体如下

学习老师一篇文章并做，

前面我们认识了各种异步编程方式回调函数，Promise对象，Generator函数，

再到两种自动执行方式Thunk，co

好像我们为了更好的解决异步编程做了很多事情，

这也说明了一个问题

就是目前仍是的异步编程都有或多或少的问题，才导致我们要找对应的解决方案

今天我们仍是的大招async

这个关键字在哪里见到来着？

我们可以给script标签添加 async 属性来异步执行脚本。

ajax 可以通过配置 async 来设置同步/异步请求

今天我们仍是一种新的使用方式: async 函数

还是参考前面读取文件的例子

var gen = function (){
 var f1 = yield readFile('/etc/fstab');
 var f2 = yield readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

我们对他做了两种解决方案, Thunk 和 co

这两种方式需要引入单独的模块，来实现自动执行器。

并且对 yield 的返回结果有严格要求。

async 函数很好的解决了这个问题。

先看看async函数如何实现上面的代码

var asyncReadFile = async function (){
 var f1 = await readFile('/etc/fstab');
 var f2 = await readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

把之前的 替换成了 async ，yield 替换成了 await，仅此而已

我们不需要在去写 Thunk 和 co 了，因为 async 自带执行器。

我们也不需要去限制 await 后面的返回值，因为 async 会自己识别，

如果是 Promise 对象就异步处理，原始类型则同步处理

最复杂的两处代码 async 都帮我们实现了。

万变不离其宗，再怎么改变，其实内里还是一样的

async 函数其实是将前文里的 Generator 函数和自动执行函数包装在一块

只是减少了我们使用上的复杂度，实际的逻辑一点没少。

使用方式也和之前 co 的使用方式类似。

所以我们罗列一下使用async时需要注意的点

1. await 命令后面的Promise对象可能抛出异常，所以最好catch一下异常
2. await 命令只能用在async函数内部，用在其他位置会报错
3. 可以使用Promise.all将任务并发执行

至此，老师的异步编程四部曲就学习完了。

声明，本博客内的文章只适用个人学习使用，不允许任何形式的网络推广网站推广转载，

如需网络推广网站推广转载，请移步阮一峰老师的博客。

附上原文地址

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。