快速理解和使用 ES7 await/async
来源:互联网 发布:国内网络搜索排名 编辑:程序博客网 时间:2024/06/08 14:38
await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段。
https://segmentfault.com/a/1190000007116715
直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据
老朋友 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((products) => { console.log('Promises/products >>>', products); // 获取用户数据 return requestP('users.json');}).then((users) => { console.log('Promises/users >>>', users); // 获取评论数据 return requestP('comments.json');}).then((comments) => { console.log('Promises/comments >>>', comments);});
强劲的新朋友 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); }}());
再次结合 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 用同步的思维去解决异步的代码,感觉非常酷非常爽!
参考文献[原文]:https://github.com/jaydson/es…
阅读全文
0 0
- 快速理解和使用 ES7 await/async
- 快速理解和使用 ES7 await/async
- 深入理解ES7的async/await
- 深入理解ES7的async/await
- 深入理解ES7的async/await
- 初探es7中async和await方法
- ES7 await/async
- ES7的Async/Await
- ES7的Async/Await
- ES7 await/async
- ES7的Async/Await
- ES7的Async/Await 异步
- ES7的Async/Await 异步
- 解决js异步问题的方法--async和await(ES7)
- Node.js Async Await in ES7
- USING ES7 ASYNC/AWAIT TODAY WITH BABEL
- ES7之async/await异步方案
- ES7 异步函数 (async await)
- 简单、原生的jedis环境搭建
- Windows进程间的通信-命名管道
- show profile进行sql分析
- ES7的Async/Await 异步
- Python模块导入错误分析
- 快速理解和使用 ES7 await/async
- 51单片机之IIC通信学习总结
- 有序广播
- ExpandableListView的使用解析
- 滑动窗口中求最大值
- 机器学习&深度学习研究者最重要的11张速查表
- 重要文档加密后忘记密码怎么办?TTPassGen-- 使用自定义密码字典生成器拯救数据
- STM32F1x系列——定时器中断
- 缓存无底洞效应