关于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 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
JS监听组合按键思路及实现过程
Apr 17 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选项与信息函数的使用详解
2013/05/10 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
vue实现记事本功能
2019/06/26 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
python简单判断序列是否为空的方法
2015/06/30 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
业务内勤岗位职责
2014/04/30 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
入门学习Go的基本语法
2021/07/07 Golang