JavaScript里的await/async的作用和用法
分享：
await/async是ES7最重要特性之一，它是目前为止JS最佳的异步解决方案了。虽然没有在ES2016中录入，但很快就到来，目前已经在 ES-NextStage4阶段。
直接上例子，比如我们需要按顺序获取：产品数据=>用户数据=>评论数据
立即学习“Java免费学习笔记（深入）”；
老朋友 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，返回一个 Promisefunction 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。
// Generatorsfunction 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，返回一个 Promisefunction 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基础教程》
以上就是详解JavaScript里的await/async的作用和用法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2727980.html
