异步神器async-await
来源:互联网 发布:电脑桌面优化软件 编辑:程序博客网 时间:2024/05/20 21:20
转载
作者:一步
地址:ES6系列文章 异步神器async-await
关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。
async-await和Promise的关系
经常会看到有了 async-await、promise
还有必要学习吗、async await
优于promise
的几个特点,接收了这些信息后,就蒙圈了。现在才知道,async-await
是promise
和generator
的语法糖。只是为了让我们书写代码时更加流畅,当然也增强了代码的可读性。简单来说:async-await
是建立在 promise
机制之上的,并不能取代其地位。
基本语法
async function basicDemo() { let result = await Math.random(); console.log(result);}basicDemo();// 0.6484863241051226//Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}
上述代码就是async-await的基本使用形式。有两个陌生的关键字async、await,同时函数执行结果似乎返回了一个promise对象。
async
async用来表示函数是异步的,定义的函数会返回一个promise对象,可以使用then方法添加回调函数。
async function demo01() { return 123;}demo01().then(val => { console.log(val);// 123});若 async 定义的函数有返回值,return 123;相当于Promise.resolve(123),没有声明式的 return则相当于执行了Promise.resolve();
await
await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部,不能单独使用。
function notAsyncFunc() { await Math.random();}notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier
await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西,但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。
function sleep(second) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(' enough sleep~'); }, second); })}function normalFunc() { console.log('normalFunc');}async function awaitDemo() { await normalFunc(); console.log('something, ~~'); let result = await sleep(2000); console.log(result);// 两秒之后会被打印出来}awaitDemo();// normalFunc// VM4036:13 something, ~~// VM4036:15 enough sleep~
希望通过上面的 demo,大家可以理解我上面的话。
实例
举例说明啊,你有三个请求需要发生,第三个请求是依赖于第二个请求的解构第二个请求依赖于第一个请求的结果。若用 ES5实现会有3层的回调,若用Promise 实现至少需要3个then。一个是代码横向发展,另一个是纵向发展。今天指给出 async-await 的实现哈~
//我们仍然使用 setTimeout 来模拟异步请求function sleep(second, param) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(param); }, second); })}async function test() { let result1 = await sleep(2000, 'req01'); let result2 = await sleep(1000, 'req02' + result1); let result3 = await sleep(500, 'req03' + result2); console.log(` ${result3} ${result2} ${result1} `);}test();//req03req02req01//req02req01//req01
错误处理
上述的代码好像给的都是resolve的情况,那么reject的时候我们该如何处理呢?
function sleep(second) { return new Promise((resolve, reject) => { setTimeout(() => { reject('want to sleep~'); }, second); })}async function errorDemo() { let result = await sleep(1000); console.log(result);}errorDemo();// VM706:11 Uncaught (in promise) want to sleep~// 为了处理Promise.reject 的情况我们应该将代码块用 try catch 包裹一下async function errorDemoSuper() { try { let result = await sleep(1000); console.log(result); } catch (err) { console.log(err); }}errorDemoSuper();// want to sleep~// 有了 try catch 之后我们就能够拿到 Promise.reject 回来的数据了。
小心你的并行处理!!!
我这里为啥加了三个感叹号呢~,因为对于初学者来说一不小心就将 ajax
的并发请求发成了阻塞式同步的操作了,我就真真切切的在工作中写了这样的代码。await
若等待的是 promise
就会停止下来。业务是这样的,我有三个异步请求需要发送,相互没有关联,只是需要当请求都结束后将界面的 loading 清除掉即可。
刚学完 async await
开心啊,到处乱用~
function sleep(second) { return new Promise((resolve, reject) => { setTimeout(() => { resolve('request done! ' + Math.random()); }, second); })}async function bugDemo() { console.time("时间一"); await sleep(1000); await sleep(1000); await sleep(1000); console.log('clear the loading~'); console.timeEnd("时间一"); //输出:时间一: 3009.62109375ms}bugDemo();
loading 确实是等待请求都结束完才清除的。但是你认真的观察下浏览器的 timeline 请求是一个结束后再发另一个的(若观察效果请发真实的 ajax 请求)
那么,正常的处理是怎样的呢?
async function correctDemo() { console.time("时间二"); let p1 = sleep(1000); let p2 = sleep(1000); let p3 = sleep(1000); await Promise.all([p1, p2, p3]); console.log('clear the loading~'); console.timeEnd("时间二"); //输出:时间二: 1014.670166015625ms}correctDemo();// clear the loading~
恩, 完美。看吧~ async-await并不能取代promise.
await in for 循环
最后一点了,await必须在async函数的上下文中的
// 正常 for 循环async function forDemo() { let arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i ++) { await arr[i]; //let a = await arr[i]; //console.log(a); }}forDemo();//正常输出// 因为想要炫技把 for循环写成下面这样async function forBugDemo() { let arr = [1, 2, 3, 4, 5]; arr.forEach(item => { await item; });}forBugDemo();// Uncaught SyntaxError: Unexpected identifier
- 异步神器async-await
- ES6系列文章 异步神器async-await
- async/await 异步编程
- async/await 异步函数
- async/await异步编程
- async/await 异步函数
- Async和await异步编程
- async和await异步操作
- U3d 使用 异步 async await
- Python异步编程Async/Await
- ES7的Async/Await 异步
- ES7的Async/Await 异步
- C#异步编程async await
- JavaScript 异步方案 async/await
- Promise,同步异步,Async/await
- ES2017 异步函数async/await
- NodeJS 异步 async / await 方案
- .NET 异步方法async await
- WinAPI: DrawText
- Cmake工具编译Android程序
- hibernate单向一对多和双向一对多
- SQLException----异常一只
- 幸运的编号
- 异步神器async-await
- [Java学习]JInternalFrame的使用(窗口与面板)
- Android获取wifi的ip地址
- MyBatis批量插入数据
- 获取元素的偏移量offset
- Linux入门4
- 爬虫技术(05)神箭手爬虫回调函数
- sqlServer存储过程查询语句
- Java实现二叉树,以及先序、中序、后序遍历算法的实现