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

所属分类: 网络编程 / JavaScript 阅读数: 358
收藏 0 赞 0 分享

本文实例讲述了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将任务并发执行

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

再次声明,本博客内的文章只适用个人学习使用,不允许任何形式的转载,

如需转载,请移步阮一峰老师的博客。

最后附上原文地址:async 函数的含义和用法

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结

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

更多精彩内容其他人还在看

浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法

下面小编就为大家分享一篇浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

把vue-router和express项目部署到服务器的方法

下面小编就为大家分享一篇把vue-router和express项目部署到服务器的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue 2.5.2下axios + express 本地请求404的解决方法

下面小编就为大家分享一篇Vue 2.5.2下axios + express 本地请求404的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue和react等项目中更简单的实现展开收起更多等效果示例

这篇文章主要介绍了vue和react等项目中更简单的实现展开收起更多等效果示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

vue webpack打包优化操作技巧

webpack是react项目标配的打包工具,和NPM搭配起来使用管理模块实在非常方便。这篇文章主要介绍了webpack打包优化(VUE Project),需要的朋友可以参考下
收藏 0 赞 0 分享

在vscode中统一vue编码风格的方法

本篇文章主要介绍了在vscode中统一vue编码风格的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue+iview+less+echarts实战项目总结

本篇文章是作者通过学习vue+iview+less+echarts制作一个小系统后,做的心得以及遇到的坑的总结,值得大家学习参考。
收藏 0 赞 0 分享

深入理解ES6中let和闭包

本篇文章主要介绍了深入理解ES6中let和闭包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈用Webpack路径压缩图片上传尺寸获取的问题

下面小编就为大家分享一篇浅谈用Webpack路径压缩图片上传尺寸获取的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

webpack将js打包后的map文件详解

下面小编就为大家分享一篇webpack将js打包后的map文件详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多