async/await --- 异步处理

2019-12-18  本文已影响0人  nomooo
        async function timeout() {
            return 'timeout'
        }

调用timeout函数会返回一个promise对象。

console.log(timeout());

看下打印结果



async函数的调用返回的是一个promise对象,还有status和value,如果async函数中有返回值,内部调用Promise.solve()方法把它转化成一个promise对象返回

        async function timeout() {
            return new Error('rejected');
        }
        console.log(timeout())

如果是想要获取async函数的执行结果,需要调用promise的then或者catch来给它注册回调函数

        async function timeout() {
            return 'timeout'
        }
        timeout().then(result => {
            console.log(result)
        })

如果async函数执行完,返回的promise没有注册回调函数,比如仅仅内部做了一次for循环,那么函数的调用就是执行函数体,跟普通函数无异,唯一区别就是函数执行完会返回一个promise对象

        async function timeout() {
            for (var i = 0; i < 5; i++) {
                console.log(`async -- ${i}`)
            }
        }
        console.log(timeout());
        console.log('out')

async 函数的执行会返回一个promise对象,并且把内部的值进行promise的封装。如果promise对象通过then或catch方法注册了回调函数,async函数执行完以后,注册的回调函数就会放到异步队列中,等待执行。

写一个函数,返回一个promise对象,该函数作用是2s之后让数值乘2

        const doubleAfterTwoSeconds = (num) => {
            return new Promise((resolve,rejected) => {
                setTimeout(()=>{
                    resolve(2 * num)
                },2000)
            })
        }

再写一个async函数,从而可以使用await关键字,await后面放置的就是返回promise对象的一个表达式,所以await后面可以跟上doubleAfterTwoSeconds函数的调用

        const returnDoubleVak= async () => {
            const result = await doubleAfterTwoSeconds(10);
            console.log(result);
        }

调用returnDoubleVak函数

        returnDoubleVak()

打开控制台,2s之后,输入20
此时代码的执行过程: 调用returnDoubleVak函数,在它里面遇到了await(await表示等待),代码就暂停到这里,不再往下执行,它等待后面的promise对象执行完毕,然后拿到promise resolve的值并进行返回,返回值拿到之后,它继续向下执行。

简单修改下returnDoubleVak 函数,计算三个数的值

        const returnDoubleVak = async () => {
            const firstResult = await doubleAfterTwoSeconds(10);
            const secondResult = await doubleAfterTwoSeconds(20);
            const thridResult = await doubleAfterTwoSeconds(30);
            console.log(firstResult + secondResult + thridResult);
        }
        returnDoubleVak()

6s后,控制台输出120,由此可看出,写异步代码就像写同步代码一样了。

当js引擎在等待promise resolve的时候,它并没有真正的暂停工作,它可以处理一些其他的事情,如果我们在returnDoubleVak 函数后面console.log(100),会先打印100。

上一篇下一篇

猜你喜欢

热点阅读