ES2017 中的异步函数详解(async function)

异步函数中有两个新的关键字async和await

async 就是异步的意思
await 就是等的意思. 暂停函数的执行, 等待异步任务完成.

声明异步函数

/*使用关键字 async 声明异步函数. 参数声明和普通函数没有任何的区别*/
async function testAsync(a, b){
    console.log(a, b);
    return "异步";
}
/*调用异步函数, 返回值是一个 Promise 对象*/
var promise = testAsync(10, 20);
console.log(promise);

说明:

• 使用关键字 async声明异步函数

• 异步函数默认返回一个已决的promise.

• 也可以在异步函数中添加return "abc"语句, 则会把这个值封装成 Promise.resolve("abc")

• 如果想返回一个reject的Promise则可以在函数内部抛出一个异常即可.

---

await

如果异步函数内没有出现await则上面的异步函数和一个普通的函数没有太大的区别.

如果有了await则会大大的不一样.

await是等待的意思, 到底在等啥?

在等待一个异步任务的完成. 一般是等待一个 Promise resolve. 当然可以等任何其他的值.

function resolve2Second(x){
    return new Promise(function (resolve, reject){
        setTimeout(() => resolve(x), 2000);
    })
}
async function add(){
    var a = await resolve2Second(20); // 2 秒钟之后 a为 20
    var b = await resolve2Second(30); // 2 秒钟之后 b为30
    return a + b; //
}
add().then(function (value){ // 4s中之后, 返回的promsie 会变成已决状态, 执行then中的函数
    console.log(value); // 50
})

说明:

• await 会等待, 等到Promise resolve之后, 他的运算的最终结果是resolve(值)中的值.

• 有一点需要注意的时候, await只能在异步函数内执行.

• 调用async函数虽然有等待, 但是并不会导致阻塞, 因为他内部的所有阻塞都封装在Promise对象中异步执行.

---

异步函数的优势在哪里

需求:
考虑有多个任务, 每个任务都依赖上一个任务的结果. 用setTimeout来模拟每个任何的耗时.

使用单纯的Promise来完成

/*n表示耗时, n+1000传给下个任务*/
function doSomething(n){
    return new Promise((resolve, reject) =>{
        setTimeout(() => resolve(n + 1000), n)
    })
}

function task1(n){
    console.log("任务1:" + n)
    return doSomething(n);
}

function task2(n){
    console.log("任务2:" + n)
    return doSomething(n);
}

function task3(n){
    console.log("任务3:" + n)
    return doSomething(n);
}

function doit(){
    task1(1000)
        .then(function (time2){
            return task2(time2);
        })
        .then(function (time3){
            return task3(time3);
        })
        .finally(function (){
            console.log("任务结束");
        })

}

doit();

---

使用 async和await

如果使用异步函数配合await会发现代码像同步一样舒服.

/*n表示耗时, n+1000传给下个任务*/
function doSomething(n){
    return new Promise((resolve, reject) =>{
        setTimeout(() => resolve(n + 1000), n)
    })
}

function task1(n){
    console.log("任务1:" + n)
    return doSomething(n);
}

function task2(n){
    console.log("任务2:" + n)
    return doSomething(n);
}

function task3(n){
    console.log("任务3:" + n)
    return doSomething(n);
}

async function doit(){
    var time2 = await task1(1000) // 等待第一个任务 resolve
    var time3 = await task2(time2) // 等待第二个任务 resolve
    var result = await task3(time3)
    console.log("任务结束:" + result);
}
doit();