async/await
本质:async 函数就是 Generator 函数的语法糖。
一、基本使用
返回值
- 返回值是Promise对象。
async function helloAsync(){
return "helloAsync";
}
console.log(helloAsync()) // Promise {<resolved>: "helloAsync"}
helloAsync().then(v=>{
console.log(v); // helloAsync
})
await 表达式
await针对所跟不同表达式的处理方式:
- Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行,并返回处理结果。
- 非 Promise 对象:直接返回对应的值。
await后跟Promise 对象:
function testAwait (txt,time) {
return new Promise(resolve => {
setTimeout(() => {
resolve(txt);
}, time);
});
}
async function helloAsync() {
var x = await testAwait ("hello world",3000);
console.log('x'+x);
var y= await testAwait ("hhhhhh",2000);
console.log('y'+y);
}
helloAsync ();
/**
输出:
xhello world
yhhhhhh
**/
await后跟非 Promise 对象:
async function asyncFun1() {
var x=await new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log(1);
resolve(11);
},3000)
})
await console.log(x);
await setTimeout(()=>{
console.log(2)
},2000)
await setTimeout(()=>{
console.log(3)
},1000)
await console.log(4)
}
asyncFun1();
//输出:1 11 4 3 2
await 命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中。
function testAwait (txt,time) {
return new Promise((resolve,reject) => {
setTimeout(() => {
if(txt=='HHH'){
reject('错误')
}else{
resolve(txt);
}
}, time);
});
}
async function helloAsync() {
try{
var x = await testAwait ("hello world",3000);
console.log('x'+x);
var y= await testAwait ("HHH",2000);
console.log('y'+y);
}catch(err){
console.log(err);
}
}
helloAsync ();
/**
输出:
xhello world
错误
**/
/********************等价于******************/
async function helloAsync() {
var x = await testAwait ("hello world",3000).then(res=>{
console.log('x'+res);
//return res
}).catch(err=>{
console.log(err);
});
var y= await testAwait ("HHH",2000).then(err=>{
console.log('y'+res);
}).catch(err=>{
console.log(err);
});
console.log('x'+x,'y'+y);
/*
x:undefined y:undefined
===>x:使用then中没有return的话。x就为undefined
*/
}
helloAsync ();
应用
function request(url,data) {
return new Promise((resolve,reject) => {
setTimeout(() => {//请求
if(res.code==200){
resolve(res);
}else{
reject(err);
}
}, time);
});
}
async function main() {
try{
//请求数据
var result = await request("/url");
//拿到后操作数据
//....
}catch(err){
//错误处理操作....
console.log(err)
}
}
main();
二、async 函数的优点
2.1.对比于Generator
内置执行器:
语义化更强:
返回值是Promise:
2.2.对比于Promise
总结
参考: