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 相关文章推荐
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
JS回调函数深入理解
Oct 16 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 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
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
jQuery实现增删改查
2020/12/22 jQuery
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
python开发之函数定义实例分析
2015/11/12 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
Java如何格式化日期
2012/08/07 面试题
中英双版中文教师求职信
2013/10/27 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
大学三年计划书范文
2014/04/30 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
会议主持词通用版
2019/04/02 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书