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 Event学习第四章 传统的事件注册模型
Feb 07 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
jQuery原生的动画效果
Jul 10 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
深入详解JS函数的柯里化
Jun 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 变量定义和变量替换的方法
2009/07/30 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
《颐和园》教学反思
2014/02/26 职场文书
公司领导班子对照材料
2014/08/18 职场文书
作风建设剖析材料
2014/10/06 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
黄山导游词
2015/01/31 职场文书
预备党员转正意见
2015/06/01 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
Python内置的数据类型及使用方法
2022/04/13 Python