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 相关文章推荐
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
js选项卡的实现方法
Feb 09 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
vue组件生命周期详解
Nov 07 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
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 xml文件操作实现代码(二)
2009/03/20 PHP
PHP之短标签开启设置
2013/06/17 PHP
JS 树形递归实例代码
2010/05/18 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
用js编写留言板
2020/03/17 Javascript
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python实现按长宽比缩放图片
2018/06/07 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
九年级历史教学反思
2014/01/27 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
南京青奥会口号
2014/06/12 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
培训讲师开场白
2015/06/01 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript