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 相关文章推荐
JS实现可改变列宽的table实例
Jul 02 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
js面向对象方式实现拖拽效果
Mar 03 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创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php简单获取目录列表的方法
2015/03/24 PHP
php制作简单模版引擎
2016/04/07 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
python中class的定义及使用教程
2019/09/18 Python
python怎么删除缓存文件
2020/07/19 Python
python 代码运行时间获取方式详解
2020/09/18 Python
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
农行实习自我鉴定
2013/09/22 职场文书
总经理助理的八要求
2013/11/12 职场文书
新春文艺演出主持词
2014/03/27 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
2015年新学期寄语
2015/02/26 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Python读取和写入Excel数据
2022/04/20 Python