关于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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
详解Vue组件之间的数据通信实例
Jun 17 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 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中用memcached实现页面防刷新功能
2014/08/19 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
python使用Tesseract库识别验证
2018/03/21 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
秘书英文求职信范文
2014/01/31 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
授权委托书怎么写
2014/09/25 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
公司市场部岗位职责
2015/04/15 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
对象析构函数__del__在Python中何时使用
2022/03/22 Python