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 25 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
vue的webcamjs集成方式
Nov 16 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.ini中文版(1)
2006/10/09 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php中取得文件的后缀名?
2012/02/20 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python使用requests发送POST请求实例代码
2018/01/25 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
详解python中的闭包
2020/09/07 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
高中运动会入场词
2014/02/14 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
颐和园的导游词
2015/01/30 职场文书
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle