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各种复制代码收集
Sep 20 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
JS定时器实例详细分析
Oct 11 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
浅谈Vue数据响应
Nov 05 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 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.MVC的模板标签系统(一)
2006/09/05 PHP
PHP设计聊天室步步通
2006/10/09 PHP
Admin generator, filters and I18n
2011/10/06 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
2013/09/16 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
微信小程序日历效果
2018/12/29 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
讲解Python中fileno()方法的使用
2015/05/24 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
知识竞赛主持词
2014/03/26 职场文书
上党课的心得体会
2014/09/02 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python