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

╰半夏微凉° 2022-05-22 04:25 412阅读 0赞

异步函数中有两个新的关键字`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. 当然可以等任何其他的值.**

> #### *说明:* ####

*  `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();