为什么要使用async/await?
当我们需要使用一个异步任务的结果时，可以使用回调函数，promise来解决，但这些方法都会陷入一个回调地狱的问题，所以这个时候就引入了async/await来解决。
async/await是什么
实际上，async/await也是promise的语法糖， async/await在底层转换成了promise和then回调函数。每次使用async/await的时候，都会为await创建一个promise，而async剩下的代码将会放到then的回调函数里面。
async/await的实现，离不开promise. 从字面意思来理解， async是“异步”的简写，而await是async wait的简写可以认为是等待异步方法执行完成。
async/await内部做了什么?
async函数会返回一个Promise对象，如果函数return的是一个直接量(普通变量)，async会直接通过Promise.resolve()方法将这个直接量封装成一个Promise对象。
console.log('1');
async function async1(){
return '3';
}
async1().then((e)=>console.log(e));
console.log('2');
// 1 2 3
如何函数return的是一个promise实例，那就按照返回的promise，该干嘛干嘛。
console.log('1');
async function async1(){
return new Promise((resolve,reject)=>{
console.log('2');
resolve('await');
});
}
async1().then((e)=>console.log(e));
console.log('3');
// 1 2 3 await
await是在等待，等待运行的结果也就是返回值。await后面通常是一个异步操作（promise）,但是这不代表await后面只能跟异步才做，await后面实际是可以接普通函数调用或者直接量。
async相当于 new Promise,await相当于then.
await的等待机制
如果await后面跟的不是一个promise,那await后面表达式的运算结果就是它等到的东西。
console.log('1');
async function async1() {
const a = await '3';
console.log(a);
}
async1();
console.log('2');
// 1 2 3
如果await后面跟的是一个promise对象，await它会’阻塞’后面的代码的执行，等着promise对象resolve, 然后得到resolve的值作为await表达式的运算结果。但是此"阻塞"非彼“阻塞”，这就是await必须用在async函数中的原因。 async函数调用不会造成"阻塞"，它内部所有的“阻塞”都被封装在一个promise对象中异步执行（这里的阻塞理解成异步等待更合理）。
console.log('1');
async function async1(){
const a = await new Promise((resolve,reject)=>{
console.log('2');
resolve('await');
});
console.log(a);
}
async1();
console.log('3');
// 1 2 3 await
async/await在使用过程中的规定
每个async方法都返回一个promise, await只能出现在async函数中
在什么时候使用async/await
单一的异步不能体现async/await的优势，直接使用promise就可以解决，但是当多个异步回调嵌套时，如果再使用promise的话，就需要处理多个promise组成的then链，这个时候使用async/await优势就体现出来了（Promise通过then链来解决多层回调的问题，现在又用async/awai来进一步优化它）。
假设一个业务，分多个步骤完成，每个步骤都是异步的且依赖于上一个步骤的结果。
function myPromise(n) {
return new Promise((resolve,reject) => {
console.log(n)
setTimeout(() => resolve(n+1), n)
})
}
function step1(n) {
return myPromise(n)
}
function step2(n) {
return myPromise(n)
}
function step3(n) {
return myPromise(n)
}
//如果用 Promise 实现
step1(1000)
.then(a => step2(a))
.then(b => step3(b))
.then(result => {
console.log(result)
})
//如果用 async/await 来实现呢
async function myResult() {
const a = await step1(1000)
const b = await step2(a)
const result = await step3(b)
return result
}
myResult().then(result => {
console.log(result)
}).catch(err => {
// 如果myResult内部有语法错误会触发catch方法
})
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
