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 demo 基本技巧
Dec 18 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
React-router4路由监听的实现
Aug 07 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP框架性能测试报告
2016/05/08 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
python开发之for循环操作实例详解
2015/11/12 Python
Python测试模块doctest使用解析
2019/08/10 Python
python用requests实现http请求代码实例
2019/10/31 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
爱护公共设施倡议书
2014/08/29 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫