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 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jquery实现聊天机器人
Feb 08 jQuery
Vue如何实现组件间通信
May 15 Vue.js
微信小程序以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文件上传主要代码讲解
2013/09/30 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
Vuex简单入门
2017/04/19 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
学校爱心捐款倡议书
2014/05/13 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
销售员岗位职责
2015/02/10 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang