关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。 ES7中新增的“语法糖”：async await
转:
链接：https://juejin.cn/post/6844903997304733704
ES7中新增的“语法糖”：async await- 函数中只要使用await，则当前函数必须使用async修饰
- async是把修饰一个函数，控制其返回的结果是一个Promise实例
- await可以理解为把一个异步操作修饰为同步的效果（但是它还是异步）
await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部，不能单独使用。 函数中只要使用await，则当前函数必须使用async修饰
await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。
在真实开发中，你有三个请求需要发生，第三个请求是依赖于第二个请求的解构第二个请求依赖于第一个请求的结果。
若用 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');
console.log(` ${result1}`);
let result2 = await sleep(1000, 'req02' + result1);
console.log(` ${result2}`);
let result3 = await sleep(500, 'req03' + result2);
console.log(` ${result3}`);
}
test();
<!-- 输出
Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: undefined
VM913:14
req01
req02req01
req03req02req01
-->
reject 处理
上面的都是 resolved 的情况，那么 reject 的处理呢
为了处理Promise.reject 的情况我们应该将代码块用 try catch 包裹一下
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() {
await sleep(1000);
await sleep(1000);
await sleep(1000);
console.log('clear the loading~');
}
bugDemo(); // 等待一会输出 clear the loading~
loading 确实是等待请求都结束完才清除的。但是你认真的观察下浏览器的 timeline 请求是一个结束后再发另一个的（若观察效果请发真实的 ajax 请求）
那么，正常的处理是怎样的呢？
async function correctDemo() {
let p1 = sleep(1000);
let p2 = sleep(1000);
let p3 = sleep(1000);
await Promise.all([p1, p2, p3]);
console.log('clear the loading~');
}
correctDemo();// clear the loading~
链接：https://juejin.cn/post/6844903997304733704
