js: async-await

2021-02-20 08:03发布

站内文章 / 前端开发

846 0

神经病院院长

女 | 书童

私信

　　async是一种用同步的方式编写异步代码的方法，与promise一样也是非阻塞的。

　　返回值：

　　async的返回值是一个promise对象。

　　执行顺序：

　　async的异步指的是async函数后面的代码是异步的，但async里面还是同步的，但需要注意的是，这里的同步不是说await后面的函数没执行完就不往下执行（指async里面的await后面的代码），而是，当调用async函数，程序执行到await时，1.会先去执行一遍await里面的代码，2.再回到调用async函数后面继续执行，3.完了之后再回到async里面的await后面继续执行。前面说的执行一遍不是说全部执行完毕，await后面的函数里如果有一个定时器（5s），那么，程序并不会等待5s后再执行步骤1，而是执行定时器的时候，异步去执行步骤1后面的。

　　来看两个例子：

　　1.如果await后面的函数的返回值是一个直接值，或者没有返回值的普通函数。

<script>
        function sleep(sec) {
            console.log('执行1');
            setTimeout(function () {
                console.log('执行2');
            }, sec * 1000)
        }

        async function show() {
            console.log('start...');
            let res = await sleep(5);
            console.log('执行3');
        }
        show();
        console.log('执行4');
        console.log('执行5');
    </script>

　　输出结果：

　　//start...

　　//执行1

　　//执行4

　　//执行5

　　//执行3

　　//执行2

　　2.如果await后面返回的是一个promise对象。

function sleep(sec) {
            console.log('执行1');
            return new Promise(function (resolve, reject) {
                setTimeout(function () {
                    resolve('aaa');//如果不执行resolve，程序不会继续往下执行
                    console.log('执行2');
                }, sec * 1000)
            })
        }

        async function show() {
            console.log('start...');
            let res = await sleep(5);
            // console.log(res);
            console.log('执行3');
        }
        show();
        console.log('执行4');
        console.log('执行5');