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

Posted 2022-11-30 做人要厚道2013

异步函数中有两个新的关键字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();