关于JavaScript中异步/等待的用法与理解


Posted in Javascript onNovember 18, 2020

昨天更新的是“JavaScript中的Promise使用详解”,其实也就是说了下基本用法和自己对Promise的理解,可能有错误之处,也欢迎指出。今天就说一说“JavaScript中的async/await的用法和理解”

JavaScript中异步/等待的用法和理解

编程语言中任意一个关键字都是有意义的,我们先从字面意思来理解。

1.async

async 是“异步”的简写,带async关键字的函数,是声明异步函数,返回值是promise对象,如果async关键字函数返回的不是promise,会自动用Promise.resolve()包装。

async function test() {
 return 'hello word'
}
test();

运行上面代码返回结果如下

2.await

await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。

如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西。

如果它等到的是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。

我们看下面段代码

function test() {
 return new Promise(resolve => {
  setTimeout(() => resolve("hello word"), 2000);
 });
}

const result = test();
console.log(result.then((val)=>{console.log(val)}));
console.log('结束')

我们以编辑器编辑器代码执行顺序来理下,

1.首先我们定义一个方法,这个方法返回Promise 对象,.then()函数两秒钟后返回调用成功。

2.接下来实例化test()函数。

3.调用result对象的then()函数,接收返回值,注意,这里是异步的

4.打印日志结束

我们运行代码,看结果

看到先打印“结束”,然后才打印的“hello word”,这就是异步,我们改造下代码

function test() {
 return new Promise(resolve => {
  setTimeout(() => resolve("hello word"), 2000);
 });
}

const result = await test();
console.log(result);
console.log('结束')

用await关键字接test()函数,看这次返回结果

我们发现先打印“hello word”,然后才打印“结束”,由于test()造成的阻塞,console.log(‘结束')会等到两秒后执行。

再来说下优缺点

优点:相对于promise,async/await处理 then 的调用链,代码要清晰很多,几乎和同步代码一样。

缺点:滥用 await 可能会导致性能问题,因为 await 会阻塞代码。

总结

到此这篇关于JavaScript中异步/等待的用法与理解的文章就介绍到这了,更多相关JavaScript异步/等待的用法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在js中使用"with"语句中跨frame的变量引用问题
Mar 08 Javascript
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
用jscript启动sqlserver
Jun 21 Javascript
javascript 新浪背投广告实现代码
Jul 07 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
微信小程序实现多行文字滚动
Nov 18 #Javascript
微信小程序实现自定义底部导航
Nov 18 #Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 #Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 #Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 #Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 #Javascript
springboot+vue实现文件上传下载
Nov 17 #Vue.js
You might like
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
完善的jquery处理机制
2016/02/21 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
简单使用Python自动生成文章
2014/12/25 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
妇女工作先进事迹
2014/08/17 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书