ES6 async、await的基本使用方法示例


Posted in Javascript onJune 06, 2020

本文实例讲述了ES6 async、await的基本使用方法。分享给大家供大家参考,具体如下:

async是异步编程的最新标准,我们来看看async如何使用

1.async的简单使用

async function fn () {
 return 'abc'
}
console.log(fn());                    // Promise { 'abc' }
fn().then(res => {
 console.log(res);                    // "abc"
})

async作为关键字放在函数前面,让同步的函数成为异步函数,不关函数里返回什么,打印出还是promise,说明async还是基于promise的,async的异步方式还是比promise更加简单优雅的。

2.await的简单使用

// 这里模拟一个耗时操作
function asyncFunc() {
 return new Promise( resolve => {
  setTimeout(() => {
   resolve(100)
  }, 1000);
 })
}

async function fn () {
 let a = await asyncFunc();
 console.log(a);                    // 100
}

fn()

一秒后打印出了100,async和await搭配使用,await可以接收异步函数,整个过程看上去有点像同步代码,但其实是异步操作。

我们在fn()上加上一行代码

async function fn () {
 let a = await asyncFunc();
 console.log(a);                    // 100
 console.log(200);                    // 200
}

执行上面代码看到两次都是在暂停一秒打印出来的,这说明await的后面如果是promise(耗时操作),它会阻塞整个函数,下面的代码不会执行。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
Vue如何清空对象
Mar 03 Vue.js
JS 数组和对象的深拷贝操作示例
Jun 06 #Javascript
ES6 Generator基本使用方法示例
Jun 06 #Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
ES6 Symbol在对象中的作用实例分析
Jun 06 #Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 #Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 #Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 #Javascript
You might like
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
vue实现登录拦截
2020/06/29 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
python字典的setdefault的巧妙用法
2019/08/07 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
请说出几个常用的异常类
2013/01/08 面试题
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
新娘父亲婚礼致辞
2014/01/16 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
化工专业求职信
2014/07/01 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
nginx+lua单机上万并发的实现
2021/05/31 Servers
MySQL深分页问题解决思路
2022/12/24 MySQL