异步函数(async function)是 ECMAScript 2017 (ECMA-262) 标准的规范,几乎被所有浏览器所支持,除了 Internet Explorer。
使用异步函数可以让异步代码更加简练,流程更加清晰
然后用不同的时间间隔输出了三行文本:
async 语法
async异步函数通过async声明,在异步函数内部使用await
来执行一个异步任务
以Promise进行对比, 首先来看一下Promise实现的异步
<script>
// 异步任务
function work(delay, message) {
return new Promise(function (resolve, reject) {
setTimeout(() => {
document.write("<br>"+"*".repeat(10)+message+"*".repeat(10)+"<br>");
resolve("success");
}, delay);
});
}
// 异步工作流
new Promise(function(resolve, reject){
resolve(work(1000, "First Step"))
}).then(function(){
return work(1000, "Second Step")
}).then(function(){
return work(1000, "Third Step")
})
</script>
使用async语句
<script>
// 异步任务
function work(delay, message) {
return new Promise(function (resolve, reject) {
setTimeout(() => {
document.write("<br>"+"*".repeat(10)+message+"*".repeat(10)+"<br>");
resolve(new Date());
}, delay);
});
}
start = new Date()
async function done() {
step1_time = await work(1000, "First Step");
step2_time = await work(4000, "Second");
step3_time = await work(3000, "Third");
// 计算耗时
document.write("<br>耗时:" + (step3_time.getTime() - start.getTime()))
}
done();
</script>
异步函数 async function 中可以使用 await
指令,await
指令后面返回的是Promise
,异步函数会在这个Promise
运行中暂停,直到其运行结束再继续运行。
异步函数实际上原理与 Promise 原生 API 的机制是一模一样的,只不过更便于程序员阅读。
在上面这个例子中,我们还可以接收到Promise
的resove
结果
step1_time = await work(1000, "First Step");
异步异常处理
处理异常的机制可以使用try-catch
块实现
<script>
function work(){
return new Promise(function(resolve, reject){
reject("出错了!!!!")
})
}
async function asyncFunc() {
try {
await work()
} catch (error) {
document.write(error);
}
}
asyncFunc();
</script>
讨论区