语法： async function name();
- demo
async studyAsync(){ to do something };
作用：与Promise一样，使得异步操作变得更加方便，相比于Promise语法更加简洁
有返回值
async函数将返回一个promise对象，内部会调用Promise.resolve()将返回值转化成promise对象并返回resolve状态，因此获取async函数的返回结果的时候需要使用promise.then()来获取
- demo
async function studyAsync(key){
if(key) {
return key
}else{
return 'I am resolve'
}
}
studyAsync().then(res => console.log(res) ) // 'I am resolve'
studyAsync(['hello','world']).then(res => console.log(res) ) // ['hello','world']
无返回值 作用与普通函数一致
抛出错误
async函数抛出错误时返回一个promise对象，内部会调用Promise.reject()将返回值转化成promise对象返回reject状态，因此获取async函数的返回结果的时候需要使用promise.catch()来获取
async function studyAsync(key){
if(key) return key;
throw new Error('出错了')
}
studyAsync().catch(res => console.log(res) ) // Error: 出错了
studyAsync(['hello','world']).then(res => console.log(res) ) // ['hello','world']
await关键字
语法: await+表达式。
await只能放在async函数体内。await关键字后面一般是一个 Promise 对象，返回该对象的异步操作结果。 也可以是原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）
- demo
async function studyAwait(){
const value = await 'Hello World';
console.log(value);
}
studyAwait();// 'Hello World'
async function studyAwaitClone(){
const p = new Promise((resolve,reject)=>{
setTimeout(()=>{
return resolve('setTimeout')
},1000)
})
return await p
}
studyAwaitClone().then(res=>console.log(res));//1s后打印'setTimeOut'
作用：
async函数体内代码执行到await关键字处会停止往下执行，直到await后面的表达式异步操作完成返回结果后，再接着执行函数体内后面的语句
- demo
async function studyAwait(){
const p = await new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('hello');
resolve('success');
},3000)
})
const p1 = await new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('world');
resolve('ok');
},2000)
})
console.log(p);
console.log(p1);
const value = 300;
console.log(value);
}
studyAwait();
结果：3秒后打印'hello'，接着2秒后打印'world'，再打印'success'、'ok'，最后打印300
当await后面的表达式异步操作结果返回reject状态时，async函数会中断执行，并且会在catch方法中返回结果
- demo
async function studyAwait(){
const p = await new Promise((resolve,reject)=>{
setTimeout(()=>{
reject('fail');
},1000)
})
<!-- 执行中断 -->
const value = 300;
console.log(value);
}
studyAwait().catch(error=>console.log(error));//'fail'
若不希望async函数会中断执行，可以在promise对象后面接着用catch()或者使用try{}catch{}
async function studyAwait(){
const p = await new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('hello');
reject('fail');
},1000)
}).catch(error=>console.log(error))
console.log('world');
}
studyAwait();//先打印hello再打印fail最后打印world
async function studyAwaitClone(){
try{
const p = await new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('success');
},1000)
})
const p1 = await new Promise((resolve,reject)=>{
setTimeout(()=>{
reject('fail');
},1000)
})
const p2 = await new Promise((resolve,reject)=>{
setTimeout(()=>{
reject('fail2');
},1000)
})
}catch(error){console.log(error)}
console.log('hello world')
}
studyAwaitClone();//先打印'fail'再打印'hello world'
如果async函数体内多次使用await关键字，因为需要等待await后面的表达式返回异步操作结果才能进行下一个await(继发执行)，所以程序执行会比较耗时。如果需要缩短程序的执行时间，可以同时触发await(并发执行)
- 继发执行
function sleep(time){
const timer = new Promise((resolve,reject)=>{
setTimeout(resolve,time)
})
return timer
}
async function demoFunction(time){
for(let i = 0;i < 5;i++){
await sleep(time);
console.log('hello world')
}
}
demoFunction(2000);//每隔两秒才打印出hello world
- 并发执行
- 写法一：使用promise.all()
async function demoFunction(){
const p = await new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('success');
},1000)
})
const p1 = await new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('success1');
},1000)
})
const p2 = await new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('success2');
},1000)
})
let res = await Promise.all([p,p1,p2]);
console.log(res);
}
demoFunction();//['success','success1','success2']
- 写法二：先把多个promise对象赋值给变量，然后再使用await
async function demoFunction(){
const p = new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('success');
resolve('success');
},3000)
})
const p1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('success1');
resolve('success1');
},1000)
})
const p2 = new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('success2');
resolve('success2');
},2000)
})
const p4 = await p;
const p5 = await p1;
const p6 = await p2;
console.log('last')
}
demoFunction(); //先打印success1再打印success2再打印success最后打印last
