async 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function f1() {
return new Promise(resolve=>{
setTimeout(()=>{
console.log('第一步');
resolve();
}, 1000)
})
}
function f2() {
return new Promise(resolve=>{
setTimeout(()=>{
console.log('第二步');
resolve();
})
}, 1000)
}
/*
f1().then(res=>{
return f2();
}).then(res=>{
console.log('已完成');
}).catch(resError=>{
console.log(resError);
})
*/
// 以上注释代码使用 async 实现
(async function(){
// await 表示其后面的函数（必须是 promise() 函数 或是 async function）是一个异步操作，下面 N 行的代码会在这个异步操作完成后再执行
await f1();
await f2();
console.log('已完成');
})()
</script>
</body>
</html>
async 传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function f1() {
return new Promise(resolve=>{
setTimeout(()=>{
resolve('第一步');
}, 1000)
})
}
function f2() {
return new Promise(resolve=>{
setTimeout(()=>{
resolve('第二步');
})
}, 1000)
}
/*
f1().then(res=>{
console.log(res);
return f2();
}).then(res=>{
console.log(res);
console.log('已完成');
}).catch(resError=>{
console.log(resError);
})
*/
// 以上注释代码使用 async 实现
// async ()=>{} <=> (async function(){})
(async ()=>{
// await 表示其后面的函数（必须是 promise() 函数 或是 async function）是一个异步操作，下面 N 行的代码会在这个异步操作完成后再执行
var res1 = await f1();
console.log(res1);
var res2 = await f2();
console.log(res2);
console.log('已完成');
})()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var person = {
say: async()=>{
var res = await (()=>{
return new Promise(resolve=>{
setTimeout(function() {
resolve('先说话');
}, 1000)
});
})();
console.log(res);
},
walk: async function() {
var res = await (()=>{
return new Promise(resolve=>{
setTimeout(function() {
resolve('再走路');
}, 1000)
});
})();
console.log(res);
}
}
/* 这种方式会报错
(async function() {
await person.say();
await person.walk();
})()
*/
var fn = async function() {
await person.say();
await person.walk();
};
fn();
</script>
</body>
</html>
async 错误处理
网友评论