js的async和await该怎么理解

发布时间:2021-12-13 18:38:16 作者:柒染
来源:亿速云 阅读:156

这篇文章给大家介绍js的async和await该怎么理解,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

一:概述


        js异步的发展经历了回调,事件,Promise,生成器,async+await,总的来说是进化了很多版本,js是单线程的,为了支持异步引入的事件循环,里面还挺深的,最近刚好遇到一个js的问题,写了一个测试,记录一下。

       首先,我们使用 async 关键字,把它放在函数声明之前,使其成为 async function。异步函数是一个知道怎样使用 await 关键字调用异步代码的函数。

       await 只在异步函数里面才起作用。它可以放在任何异步的,基于 promise 的函数之前。它会暂停代码在该行上,直到 promise 完成,然后返回结果值。在暂停的同时,其他正在等待执行的代码就有机会执行了。上面是 MDN 上面定义的,看着有点懵,来段代码试一下。

二:调试


// 这个sleep返回一个Promise对象const sleep = function (time) {    console.log(Date.parse(new Date()))    return new Promise(function (resolve, reject) {        setTimeout(function () {            resolve('ok');
       }, time);    })};// 这个是同步执行的代码function sleep_sync(numberMillis) {    let now = new Date();    const exitTime = now.getTime() + numberMillis;    while (true) {        now = new Date();        if (now.getTime() > exitTime)            return;    }}// 用async修改的代码async function test() {    console.log("call test")    console.log("同步执行5s开始")    sleep_sync(5000)    console.log("同步执行5s结束")    console.log("异步执行10秒开始")    await sleep(10000)    console.log("异步执行10秒结束")    console.log("异步执行5秒开始")    await sleep(5000)    console.log("异步执行5秒结束")    console.log("将要执行return")    return "hello test"}// 调用async函数result_test = test()console.log(“主进程逻辑")result_test.then((r) => console.log(r))console.log("主进程逻辑1")

执行结果

call test同步执行5s开始-------------    执行了5s-------------同步执行5s结束异步执行10秒开始1595845827000主进程逻辑主进程逻辑1-------------    执行了大概10s-------------异步执行10秒结束异步执行5秒开始1595846947000--------------    执行了5s--------------异步执行5秒结束将要执行returnhello test

分析一下(有错误的欢迎留言):

执行的第一行代码

result_test = test()

调用 test 函数,进入 test 函数,test是由 async修饰的,在这个函数里代码分为2类,同步代码和异步代码,同步代码是不管 async 关键字的,肯定得执行,所以  sleep_sync 同步执行了 5s ,包括console.log都是同步代码。对应上面输出

完后紧接着是下面的代码

await sleep(10000)

先看sleep函数,先打印当前时间,完后创建Promise对象,Promise对象创建完后会立马执行的,完后await 和 return 都会造成 async 修饰的函数返回,所以就到了主进程了。当主进程打印完 ”主进程逻辑1“ 就没有代码可执行了。

接下来就到了 ”异步执行10秒结束“  这个时间不一定是 10s,js是单线程的要是进程阻塞严重的话可能会大于 10s。

在 async 里面,await都是串行执行的,说以就执行完 10s 那个开始执行 5s 那个,完后再 return。

async函数返回的值都是 Promise,所以可以通过 then 获取到值。

关于js的async和await该怎么理解就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. async/await的应用
  2. async/await地狱该如何避免详解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js async await

上一篇:如何解析GeoJSON文件压缩

下一篇:python如何实现微信小程序反编译

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》