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 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
js资料prototype 属性
2007/03/13 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
linux面试题参考答案(6)
2016/06/23 面试题
给女朋友的道歉信
2014/01/10 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
上课迟到检讨书
2014/02/19 职场文书
文明市民先进事迹
2014/05/15 职场文书
公共场所标语
2014/06/30 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书