async/await
最近公司面试，发现有个别的朋友搞不明白 async , await ，甚至以为这个东西是 es6 的，虽然它和 es6 的 promise 确实有血缘关系，但这个东西确实是 es7 的。好了，废话不多说，让我们今天彻底看看这个玩意是什么吧。
async
async 其实字面好理解 异步，await从字面意思也好理解，等待。所以看出来他们相辅相成，所以 await 只能出现在 async 函数中。 让我们来写段代码看看
async function asyncTest(){
return 'hello';
};
console.log(asyncTest()); //Promise {<resolved>: "hello"}
我们看出来async返回的是一个 promise 对象，不太熟悉 promise 对象的童鞋，请看 上一篇文章 ，那既然是个promise对象，我们的所有promise的方法是不是可以调用了。让我来看一下。
async function test(){
return '我被触发了';
};
test().then((val)=>{ console.log(val) }) //我被触发了
竟然他return一个值那，又是promise对象，那我们是不是可以理解为就是 promise.resolve() 呢，让我们来改写一下：
const promise = new Promise((resolve)=>{
resolve('我被触发了')
});
promise.then((val)=>{
console.log(val) //我被触发了。
});
好的，没毛病。** 在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且，绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数没区别 **
await
好了我们。大概知道了 async 的写法，那么我们来看看 await 。之前说到 await 只能出现在 async 的方法中，那我们来看看不出现会怎么样？
function test(){
return 1
};
function result(){
const val = await test()
console.log(val) //await is only valid in async function
}
result();
很明显报错了。再次验证 await 只能用在 async 的方法中。
改：
function test(){
return 1
};
async function result(){
const val = await test()
console.log(val) //1
}
result();
我们在来做些改变：
function test(){
return Promise.resolve(1)
};
async function result(){
const val = await test()
console.log(val) //1
}
result();
看来我们await调用外部的promise也没问题，结合之前的，我们是不是可以这样写：
async function test(){
return 1
};
async function result (){
const val = await test();
console.log(val) //1
}
result()
两者结合
我们已经在上面引出了两者结合，但是anysc顾名思义，异步，好我们看看两者结合怎么来处理异步问题吧。
function test(){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve('我出来了')
},1000)
})
};
async function result(){
const val = await test();
console.log(val) //我出来了
};
result();
我们可以看出，test返回一个promise的对象，然后result里的await拿到了这个值。我们看看如果用.then怎么写吧
function test(){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve('我出来了')
},1000)
})
}
test().then((val)=>{
console.log(val) //我出来了
})
那既然.then可以解决问题那么问啥要用async和await呢？原因很简单，多个链式调用。
例如我们有这样的需求：
function test1(val){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(val + 1)
},1000)
})
}
function test2(val){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(val + 1)
},1000)
})
}
function test3(val){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(val + 1)
},1000)
})
}
function doit(){
test1(1)
.then((v)=>test2(v))
.then((v)=>test3(v))
.then((v)=>{console.log(v)}) //4
}
doit()
.then.then.then看着繁琐且不易维护。我们来看看用新武器怎么解决的吧
function test1(val){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(val + 1)
},1000)
})
}
function test2(val){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(val + 1)
},1000)
})
}
function test3(val){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(val + 1)
},1000)
})
}
async function doit(){
const v1 = await test1(1);
const v2 = await test2(v1);
const v3 = await test2(v2);
console.log(v3) //4
}
doit();
是不是更加灵活了？数据的解耦非常舒服，所以一个东西得诞生一定有原因的。
结语
关于 async ， await 暂时说到这里。困了，好累啊。。。睡了晚安各位
