文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一道面试题引发的事件循环深入思考

两个队列的概念 nextTickQueue 和微队列microTaskQueue，也就是说开启异步任务也分为几种，像promise对象这种，开启之后直接进入微队列中，微队列内的就是那个任务快就那个先执行完...6.同步任务中async以及promise的一些误区 误区1: 在那道面试题中，在同步任务的过程中，不知道大家有没有疑问，为什么不是执行完async2输出后执行async1 end输出，而是接着执行promise1...解答: “ async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。”...——阮一峰ES6 简单的说，先去执行后面的同步任务代码，执行完成后，也就是表达式中的 Promise 解析完成后继续执行 async 函数并返回解决结果。...所以最好在它的前面加上return语句，这样就不会出现意外 new Promise((resolve,reject) => { return resolve(1); //后面的语句不会执行

80620

用一道大厂面试题带你搞懂事件循环机制

两个队列的概念 nextTickQueue 和微队列 microTaskQueue，也就是说开启异步任务也分为几种，像 Promise 对象这种，开启之后直接进入微队列中，微队列内的就是那个任务快就那个先执行完...6.同步任务中async以及promise的一些误解 问题1: 在面试题中，在同步任务的过程中，不知道大家有没有疑问，为什么不是执行完async2输出后执行async1 end输出，而是接着执行 promise1...引用阮一峰老师书中一句话：“ async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。”...简单的说，先去执行后面的同步任务代码，执行完成后，也就是表达式中的 Promise 解析完成后继续执行 async 函数并返回解决结果。...所以最好在它的前面加上return语句，这样就不会出现意外 new Promise((resolve,reject) => { return resolve(1); //后面的语句不会执行

57630
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    用一道大厂面试题带你搞懂事件循环机制

    两个队列的概念 nextTickQueue 和微队列 microTaskQueue，也就是说开启异步任务也分为几种，像 Promise 对象这种，开启之后直接进入微队列中，微队列内的就是那个任务快就那个先执行完...6.同步任务中async以及promise的一些误解 问题1: 在面试题中，在同步任务的过程中，不知道大家有没有疑问，为什么不是执行完async2输出后执行async1 end输出，而是接着执行 promise1...引用阮一峰老师书中一句话：“ async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。”...简单的说，先去执行后面的同步任务代码，执行完成后，也就是表达式中的 Promise 解析完成后继续执行 async 函数并返回解决结果。...所以最好在它的前面加上return语句，这样就不会出现意外 new Promise((resolve,reject) => { return resolve(1); //后面的语句不会执行

    1.1K10

    JavaScript执行机制

    若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身。...await表达式会暂停整个async函数的执行进程并出让其控制权，只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。promise的解决值会被当作该await表达式的返回值。.../Await之后，我们解析上面代码的具体执行过程就比较清晰了：第一轮loop，跳过函数的定义，进入test函数执行，输出步骤3，遇到await关键词，主代码块宏任务切换到await后面的函数，执行testSomething...第一轮loop，执行完步骤9之后主代码块执行完毕，开始清空微任务队列，微任务队列此时有第一个await注册的微任务和主代码块的Promise.then总计两个微任务。...继续执行遇到第二个await，同理正常执行testAsync函数输出步骤2，在return之后注册微任务并挂起，交出线程控制权，此时微任务队列仍有两个任务：主代码块的Promise.then和第二个await

    39933

    JavaScript中的单线程运行，宏任务与微任务，EventLoop

    第一行的 setTimeout 是异步代码，跳过，来到了 new Promise(...) 这一段代码。...对比浏览器与NodeJS的不同 在大部分情况下，浏览器与NodeJS的运行没有区别，唯一有区别的是在第二轮事件执行的时候，如果有多个宏任务(setTimeout)，浏览器会依次的执行宏任务，上一个宏任务执行完成了在执行下一个宏任务...关于 async/await 函数 因为，async/await本质上还是基于Promise的一些封装，而Promise是属于微任务的一种。...可以理解为，await 以前的代码，相当于与 new Promise 的同构代码，以后的代码相当于 Promise.then。...: The Event Loop NodeJS EventLoop HTML5 EventLoop 标准 博客园的一位大佬，最后的ES7的 async/await 就是从这里看到的

    3.4K42

    探索异步迭代器在 Node.js 中的使用

    如果是需要并发执行的则不建议使用，这个原因会在下面解析 events.on() 源码时给出答案。...; 以上代码看似新颖，其核心实现就是使用 events.on() 返回 createServer() 对象 request 事件的异步可迭代对象，之后用 for await...of 语句遍历，客户端每一次请求...行 {3} 如果迭代器对象完成，返回的 Promise 对象 done 属性设置为 true，遍历器也就结束了，变量 finished 是由 iterator 对象的 return() 方法被调用之后设置的......of 语句在循环内部会默认调用可迭代对象 readable 的 Symbol.asyncIterator() 方法得到一个异步迭代器对象，之后调用迭代器对象的 next() 方法获取结果。...使用 for await...of 遍历可迭代对象 cursor 还是基于我们上面的示例，如果换成 for await...of 语句遍历就简单的多了。

    7.5K20

    Javascript异步回调细数：promise yield asyncawait

    虽然我对js的鄙视一直都是无以复加，但是奈何前端环境不得不依赖javascript。哪些nodejs的大神们四处布道nodejs统治一切：单线程非阻塞，高IO操作。...Promise属性及方法Promise.resolve(value)方法返回一个以给定值解析后的Promise 对象。...如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。...如果该函数没有return语句，则返回的对象的value属性值为undefined。...async用来申明里面包裹的内容可以进行同步的方式执行，await则是进行执行顺序控制，每次执行一个await，程序都会暂停等待await返回值，然后再执行之后的await。

    84500

    Node.js 中的这几个场景都可以使用异步迭代器

    ; 以上代码看似新颖，其核心实现就是使用 events.on() 返回 createServer() 对象 request 事件的异步可迭代对象，之后用 for await...of 语句遍历，客户端每一次请求...行 {3} 如果迭代器对象完成，返回的 Promise 对象 done 属性设置为 true，遍历器也就结束了，变量 finished 是由 iterator 对象的 return() 方法被调用之后设置的...，之后 for await...of 遍历器会自动再次执行 next() 方法，然后 new 一个新的 Promise 反复循环，直到事件对象抛出 error 事件或执行 iterator 对象的 return......of 语句在循环内部会默认调用可迭代对象 readable 的 Symbol.asyncIterator() 方法得到一个异步迭代器对象，之后调用迭代器对象的 next() 方法获取结果。...使用 for await...of 遍历可迭代对象 cursor 还是基于我们上面的示例，如果换成 for await...of 语句遍历就简单的多了。

    3.8K40

    【nodejs】让nodejs像后端mvc框架（asp.net mvc）一orm篇【如EF般丝滑】typeorm介绍（88）

    文章目录 前情概要 在使用nodejs开发过程中，刚好碰到需要做一个小工具，需要用到数据库存储功能。而我又比较懒，一个小功能不想搞一个nodejs项目，又搞一个后端项目。...不如直接在nodejs里面把对数据库的操作也做掉。 结果百度一圈下来发现nodejs这边还都是比较原始的、类似后端的通过coneection连数据库，接着open，在写sql语句干嘛干嘛的。...经过后端这么多年的脚手架工具熏陶，实在懒得写这些没营养的简单增删改查sql语句了。...比如mongodb如何映射复杂对象，关系型数据怎么弄级联删除之类的功能 使用总结 mysql、sqlite、mongodb3个数据库下都使用过，使用感觉虽然没有后端的orm那么强大，但是在nodejs领域内...当然不排除我孤陋寡闻漏了更NB的其他框架。 绝大多数的后端orm该有的功能它都有，没有可能是没找到正确的使用方式。为此我还发过几条issue给开发者。

    2.2K20

    JavaScript Event Loop

    需要注意的是：Promise 构造函数中的代码是同步执行。 浏览器的事件循环执行机制 先说一下浏览器中的事件循环机制，浏览器与 Nodejs 事件循环机制是不太一样的。...出现 await 之后，await 是一个让出线程的标志。await 后面的表达式会先执行一遍，之后将 await 后面的代码加入到微任务当中。 然后就会跳出整个 async 函数来执行后面的代码。...首先执行 async1 函数，await 语句之前的代码是立即执行的，因此打印出了 start，然后执行一遍 await 后面的函数调用表达式，就会执行 async2 函数，于是打印出 async2。...然后将 await 之后的代码放入微任务中。全局代码执行完毕，开始执行微任务，于是在最后打印出了 end。 async、Promise 混合 考虑下面的代码，打印顺序是怎样的？...同步代码执行完毕，执行微任务，微任务队列有两个函数，首先进去的是 await 后面的语句，因此先执行它，于是打印出了 async1 end。然后执行 then 函数，于是打印出了 promise2。

    1.3K20

    puppeteer学习----登录人才网并截图

    puppeteer 2.1 当然要先安装NodeJS windows下直接访问官网下安装包傻瓜安装, 推荐按LTS版本 当然 windows也能用nvm, 我机子就用的nvm, 不过上次帮别人安的时候发现环境变量有点问题...Linux和Mac当然推荐直接通过nvm安装 参考资料: NodeJS中文: https://nodejs.org/zh-cn/ nvm: https://github.com/creationix/...set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1即可跳过下载 ?...puppeteer # 或者 $ yarn add puppeteer 等待安装完即可 不知道是不是本生安装了chrome浏览器, 机子里自带了chromium, 我在依赖中看到了存在chromium, 如果你没有的话可以去网上下...png' }); browser.close(); // 任务完成, 关闭浏览器 })(); 延时函数 let timeout = function (delay) { return new Promise

    83410

    Eventloop不可怕，可怕的是遇上Promise

    那么在没有Promise的浏览器中，微任务这个队列是如何实现的呢？...小知识：babel中对于微任务的polyfill，如果是拥有setImmediate函数平台，则使用之，若没有则自定义则利用各种比如nodejs中的process.nextTick，浏览器中支持postMessage.../* 突如其来的沉默 */ 这里插播一条，async/await因为要经过3轮的microtask才能完成await，被认为开销很大，因此之后V8和Nodejs12开始对此进行了修复，详情可以看github...总结一下：async/await有时候会推迟两轮microtask，在第三轮microtask执行，主要原因是浏览器对于此方法的一个解析，由于为了解析一个await，要额外创建两个promise，因此消耗很大...：promise.then，process.nextTick 第二步解析“拦路虎”，出现async/await不要慌，他们只在标记的函数中能够作威作福，出了这个函数还是跟着大部队的潮流。

    71620

    Node 16 新版本发布，一大堆新特性来袭！！！

    偶数号的版本为 LTS 版本，这将是既 Node14 之后的下一个长期支持版本，Node14 在 2020-10-27 已进入 Active LTS 阶段，还没有升级的同学要尽量更新呀。 ?..., t)); 那有了 Timers Promise 之后呢，使用 setTimeout 直接可替代 sleep 功能，惊不惊喜。...import { setTimeout } from 'timers/promises' await setTimeout(100) setTimeout 的第二个参数接收一个值，作为 Promise...也变为 Promise 形式后，对于每间隔一分钟便执行操作的定时任务而言，具有更大的可读性 import { setInterval } from 'timers/promises' for await...，用以解析 HTTP 报文 icu, 升级到 69.1 npm, 升级到 7.10.0 使用 process.versions 可看到相关依赖的版本号 > process.versions { node

    2.8K30

    50行代码串行Promise，koa洋葱模型原来这么有趣？

    更多 nodejs 调试相关 可以查看官方文档[4] 顺便提一下几个调试相关按钮。...3.1.3 简化 compose 便于理解 自己动手调试之后，你会发现 compose 执行后就是类似这样的结构（省略 try catch 判断）。 // 这样就可能更好理解了。...最后一个中间件中有调用next函数，则返回Promise.resolve。如果没有，则不执行next函数。这样就把所有中间件串联起来了。这也就是我们常说的洋葱模型。...相信学会了通过测试用例调试源码后，会觉得源码也没有想象中的那么难。 开源项目，一般都会有很全面的测试用例。...调试相关 可以查看官方文档: https://code.visualstudio.com/docs/nodejs/nodejs-debugging [5] koa的文档: https://github.com

    43920

    JS事件循环之宏任务和微任务

    ：先执行一个宏任务，执行过程中如果产出新的宏/微任务，就将他们推入相应的任务队列，之后在执行一队微任务，之后再执行宏任务，如此循环。...只有then之后的代码，才是异步执行的代码，是一个微任务。...当前任务队列：微任务[]，宏任务[timeou2] 宏任务： 输出timeout2 #async/await 的执行 async 和 await 其实就是 Generator 和 Promise 的语法糖...async 函数和普通 函数没有什么不同，他只是表示这个函数里有异步操作的方法，并返回一个 Promise 对象 翻译过来其实就是： // async/await 写法 async function async1...最后的最后，记住，JavaScript 是一门单线程语言，异步操作都是放到事件循环队列里面，等待主执行栈来执行的，并没有专门的异步执行线程。 #参考 知乎-【JS】深入理解事件循环,这一篇就够了!

    1.2K10

    深入浅出node中间件原理

    在NodeJS中，中间件主要是指封装http请求细节处理的方法。...我们目前看到的主流nodejs框架, 比如connect, koa, express, egg, nest等, 都离不开中间件的设计概念, 所以为了能让大家更深入的窥探nodejs世界, 我们就非常有比较研究中间件的实现原理...正文 在了解node中间件的概念之后, 我们就来手动实现一下中间件, 最后我们会简单分析一下koa中中间件的实现思路....promise, 使得其在业务处理完成之后通过then回调来继续处理中间件逻辑....' } } } 复制代码 以上代码即实现用户登录态处理, 如果用户在没有登录的情况下防问任何需要登录的接口, 都将返回权限不足或则在请求库中让其重定向到登录页面.

    56120

    「译」更快的 async 函数和 promises

    ，更糟糕的是，在 NodeJS 等实时性要求高的场景下调试堪比噩梦。...性能提升取决于以下三个因素： TurboFan，新的优化编译器 Orinoco，新的垃圾回收器 一个 Node.js 8 的 bug 导致 await 跳过了一些微 tick（microticks） 当我们在...最后，Node.js 8 中引入了一个 bug 在某些时候会让 await 跳过一些微 tick，这反而让性能变好了。这个 bug 是因为无意中违反了规范导致的，但是却给了我们优化的一些思路。...之所以叫这个名字，因为没有其它东西链过它，仅仅是引擎内部用的。throwaway promise 会链到含有恢复处理函数的 promise 上。...第一行的作用是封装一个 promise，第二行为了 resolve 封装后的 promose await 之后的值 v。这两行产生个冗余的 promise 和两个冗余的微任务。

    1.1K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券