本文摘自PHP中文网,作者coldplay.xixi,侵删。
JavaScript里的await/async的作用和用法
分享:
await/async是ES7最重要特性之一,它是目前为止JS最佳的异步解决方案了。虽然没有在ES2016中录入,但很快就到来,目前已经在 ES-NextStage4阶段。
直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据
老朋友 Ajax
传统的写法,无需解释
1 2 3 4 5 6 7 8 9 10 11 12 | 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 带来的厄运金字塔,相比起来代码更清晰了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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 可以更简洁
1 2 3 4 5 6 7 8 | 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。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 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 结合使用
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 结合使用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | (async () => {
try {
let products = await fetch( 'products.json' );
let parsedProducts = await products.json();
let users = await fetch( 'users.json' );
let parsedUsers = await users.json();
let comments = await fetch( 'comments.json' );
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);
}
}());
|
按数组顺序执行
1 2 3 4 5 6 7 8 | (async () => {
let parallelData = await* [
requestP( 'products.json' ),
requestP( 'users.json' ),
requestP( 'comments.json' )
];
console.log( 'Async parallel >>>' , parallelData);
}());
|
再次结合 Fetch
1 2 3 4 5 6 7 8 | (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基础教程》
以上就是详解JavaScript里的await/async的作用和用法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript用什么存储数据
详解获取javascript各种全局对象变量的方法
javascript怎么判断是否为整数
javascript如何将字符串转为数字
javascript和ajax的区别是什么
javascript如何定义静态方法
vue.js-div怎么隐藏滚动条
聊一聊javascript 中的 url 对象
浅析typescript和react中使用ref的方法
深入了解javascript中的null
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解JavaScript里的await/async的作用和用法