Javascript 异步函数

异步函数（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>