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动态操作table(新增,删除相关列信息)
May 23 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
javascript修改图片src的方法
Jan 27 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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禁止个别IP访问网站
2013/10/30 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
javascript 跳转代码集合
2009/12/03 Javascript
js function定义函数使用心得
2010/04/15 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python如何定义带参数的装饰器
2018/03/20 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
零基础小白多久能学会python
2020/06/22 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
工程建设实施方案
2014/03/14 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
建国大业电影观后感
2015/06/01 职场文书
业务员管理制度范本
2015/08/06 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python