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实现web页面中指定区域打印
Oct 30 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
layui监听单元格编辑前后交互的例子
Sep 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
vue中的inject学习教程
2019/04/24 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
python实现windows下文件备份脚本
2018/05/27 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
wxPython实现文本框基础组件
2019/11/18 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
教师节活动主持词
2014/04/02 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL