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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
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连接类
2013/06/07 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
Python中实现常量(Const)功能
2015/01/28 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
判断单链表中是否存在环
2012/07/16 面试题
成人教育自我鉴定
2013/11/01 职场文书
入职担保书怎么写
2014/05/12 职场文书
2014年统战工作总结
2014/12/09 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
长征观后感
2015/06/09 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS