JavaScript中的await/async的作用和用法


Posted in Javascript onOctober 31, 2016

await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段。

直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据

老朋友 Ajax

传统的写法,无需解释

// 获取产品数据
ajax('products.json', (products) => {
console.log('AJAX/products >>>', JSON.parse(products));
// 获取用户数据
ajax('users.json', (users) => {
console.log('AJAX/users >>>', JSON.parse(users));
// 获取评论数据
ajax('products.json', (comments) => {
console.log('AJAX/comments >>>', JSON.parse(comments));
});
});
});

不算新的朋友 Promise

Promise 已经被提及已久了,也是 ES6 的一部分。Promise 能消除 callback hell 带来的厄运金字塔,相比起来代码更清晰了。

// Promise
// 封装 Ajax,返回一个 Promise
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
// 获取产品数据
requestP('products.json').then(function(products){
console.log('Promises/products >>>', products);
});
// 获取用户数据
requestP('users.json').then(function(users){
console.log('Promises/users >>>', users);
});
// 获取评论数据
requestP('comments.json').then(function(comments){
console.log('Promises/comments >>>', comments);
});

当然使用Promise.all 可以更简洁

Promise.all([
requestP('products.json'),
requestP('users.json'),
requestP('comments.json')
])
.then(function(data) {
console.log('Parallel promises >>>', data);
});

强劲的新朋友 Generators

Generators 也是 ES6 一个新的特性,能够 暂停/执行 代码。yield 表示暂停,iterator.next 表示执行下一步,如果你不了解 Generators 也没关系,可以忽略它直接学习 await/async。

// Generators
function request(url) {
ajax(url, (response) => {
iterator.next(JSON.parse(response));
});
}
function *main() {
// 获取产品数据
let data = yield request('products.json');
// 获取用户数据
let users = yield request('users.json');
// 获取评论数据
let products = yield request('comments.json');
console.log('Generator/products >>>', products);
console.log('Generator/users >>>', users);
console.log('Generator/comments >>>', comments);
}
var iterator = main();
iterator.next();

碉堡的朋友 await/async

与 Promise 结合使用

// 封装 Ajax,返回一个 Promise
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
(async () => {
// 获取产品数据
let data = await requestP('products.json');
// 获取用户数据
let users = await requestP('users.json');
// 获取评论数据
let products = await requestP('comments.json');
console.log('ES7 Async/products >>>', products);
console.log('ES7 Async/users >>>', users);
console.log('ES7 Async/comments >>>', comments);
}());

与 Fetch API 结合使用:

(async () => {
// Async/await using the fetch API
try {
// 获取产品数据
let products = await fetch('products.json');
// Parsing products
let parsedProducts = await products.json();
// 获取用户数据
let users = await fetch('users.json');
// Parsing users
let parsedUsers = await users.json();
// 获取评论数据
let comments = await fetch('comments.json');
// Parsing comments
let parsedComments = await comments.json();
console.log('ES7 Async+fetch/products >>>', parsedProducts);
console.log('ES7 Async+fetch/users >>>', parsedUsers);
console.log('ES7 Async+fetch/comments >>>', parsedComments);
} catch (error) {
console.log(error);
}
}());

按数组顺序执行

(async () => {
let parallelData = await* [
requestP('products.json'),
requestP('users.json'),
requestP('comments.json')
];
console.log('Async parallel >>>', parallelData);
}());

再次结合 Fetch

(async () => {
let parallelDataFetch = await* [
(await fetch('products.json')).json(),
(await fetch('users.json')).json(),
(await fetch('comments.json')).json()
];
console.log('Async parallel+fetch >>>', parallelDataFetch);
}());

使用 await/async 用同步的思维去解决异步的代码,感觉非常酷非常爽!关于js中的await/async的作用和用法就给大家介绍这么多,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
浅析node.js中close事件
Nov 26 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
Vue路由权限控制解析
Nov 09 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 #Javascript
微信小程序 开发工具快捷键整理
Oct 31 #Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 #Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 #Javascript
jQuery绑定事件的四种方式介绍
Oct 31 #Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 #Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 #Javascript
You might like
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
Python set常用操作函数集锦
2017/11/15 Python
Python使用贪婪算法解决问题
2019/10/22 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
实习求职信
2013/12/01 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
小学生演讲稿大全
2014/04/25 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
医学检验专业自荐信
2014/09/18 职场文书
银行自荐信范文
2015/03/25 职场文书
酒店员工手册范本
2015/05/14 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
Pandas自定义选项option设置
2021/07/25 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python