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的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
Vue slot用法(小结)
Oct 22 Javascript
Node.js实现断点续传
Jun 23 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+oracle 分页类
2006/10/09 PHP
Javascript注入技巧
2007/06/22 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python中的自省(反射)详解
2015/06/02 Python
django实现前后台交互实例
2017/08/07 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python实现对adb命令封装
2020/03/06 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
银行存款证明样本
2014/01/17 职场文书
大学班级计划书
2014/04/29 职场文书
人力资源管理求职信
2014/08/07 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
公司更名通知函
2015/04/24 职场文书
干部考核工作总结
2015/08/12 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
python常见的占位符总结及用法
2021/07/02 Python