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实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python文件处理
2016/02/29 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
Python函数和模块的使用总结
2019/05/20 Python
使用Python的turtle模块画国旗
2019/09/24 Python
pycharm运行scrapy过程图解
2019/11/22 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
云冈石窟导游词
2015/02/04 职场文书
司机个人年终总结
2015/03/03 职场文书
民主生活会意见
2015/06/05 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
Python加密与解密模块hashlib与hmac
2022/06/05 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS