js: async-await

孤者浪人 提交于 2021-02-20 08:28:59

  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');

  输出结果:

  //start...

  //执行1

  //执行4

  //执行5

  //执行2

  //执行3

 

  解释:当程序执行到await时,会先去执行sleep里面代码,输出“执行1”,并将返回的promise对象放入promise队列中,再去执行show()后面的代码,输出“执行4”,"执行5",然后再回到async里等待await的返回值,再继续await后面的代码。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!