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


Posted in Javascript onApril 08, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

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

Javascript 相关文章推荐
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 #Javascript
JS co 函数库的含义和用法实例总结
Apr 08 #Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 #Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 #Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 #Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 #Javascript
vue开发移动端底部导航条功能
Apr 08 #Javascript
You might like
PHP 万年历实现代码
2012/10/18 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
php测试kafka项目示例
2020/02/06 PHP
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
python文件操作相关知识点总结整理
2016/02/22 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Python中Numpy mat的使用详解
2019/05/24 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
在python shell中运行python文件的实现
2019/12/21 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
三年级科学教学反思
2014/01/29 职场文书
违纪检讨书2000字
2014/02/08 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
PyTorch中的torch.cat简单介绍
2022/03/17 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis