关于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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
vue中render函数的使用详解
Oct 12 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
自己动手做一个SQL解释器
2006/10/09 PHP
php反弹shell实现代码
2009/04/22 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP中cookie知识点学习
2018/05/06 PHP
php时间戳转换代码详解
2019/08/04 PHP
调试php程序的简单步骤
2019/10/04 PHP
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
经理管理专业毕业自荐书范文
2014/02/12 职场文书
产品售后服务承诺书
2014/05/21 职场文书
美食节策划方案
2014/05/26 职场文书
受伤赔偿协议书
2014/09/24 职场文书
总结会主持词
2015/07/02 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Java版 单机五子棋
2022/05/04 Java/Android
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript