美文网首页
async/await --- 异步处理

async/await --- 异步处理

作者: nomooo | 来源:发表于2019-12-18 22:54 被阅读0次
  • async用法(作为关键字放到函数前面)
        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。

相关文章

  • async和await

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • ES8(一) —— async&await

    目录 async和普通函数的区别 await async/await处理多回调异步 async和await必须配合...

  • flutter中compute和isolate

    async和await:对于普通的任务,使用async和await可实现异步处理任务,而async的处理方式并非使...

  • Promise和async/await

    Promise和async/await都是异步处理的方法。async/await看起来更简单易用。 Promise...

  • async/await和Promise杂谈

    前言 Promise和async/await是当前前端最常见的异步程序处理方式,async/await是基于Pro...

  • [Flutter] 异步操作和 HTTP 请求

    async 和 await Dart 语言支持函数进行异步操作的处理,使用 async 和 await。第一步将函...

  • async

    async/await特点 async/await更加语义化,async是“异步”的简写,async functi...

  • 理解用 async/await 来处理异步

    理解用 async/await 来处理异步 async的用法 async 作为一个关键字放到函数前面,用于表示函数...

  • async/await --- 异步处理

    async用法(作为关键字放到函数前面) 调用timeout函数会返回一个promise对象。 看下打印结果 as...

  • async/await 异步处理

    业务需求:就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,...

网友评论

      本文标题:async/await --- 异步处理

      本文链接:https://www.haomeiwen.com/subject/tarpnctx.html