JavaScript里的await/async的作用和用法
2017-05-26 09:14
579 查看
老朋友 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 用同步的思维去解决异步的代码,感觉非常酷非常爽! |
相关文章推荐
- JavaScript中的await/async的作用和用法
- javascript中async、await、yield、*的用法
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
- Javascript 作用域与this的用法
- async和await用法
- C# 异步操作 async await 的用法
- 关于JavaScript 的 async/await
- JavaScript ES7 中使用 async/await 解决回调函数嵌套问题
- javascript中$符号的作用和用法
- 深入理解 JavaScript 异步系列(5)—— async await
- JavaScript标记上的defer与async的作用与区别
- Javascript中的async await
- async和await用法
- 「大概可能也许是」目前最好的 JavaScript 异步方案 async/await
- C# Async与Await用法
- async和await 用法
- .Net 4.5 Async & Await 用法
- Javascript中的return作用及javascript return关键字用法详解
- Async和await关键字的用法
- Javascript中的async await_0