Promisification、微任务

前提摘要
Promise 对象的构造器(constructor)语法如下:
let promise = new
Promise(function(resolve, reject) {
// executor
});
传递给 new Promise的函数被称为 executor当 new Promise 被创建,executor 会自动运行。

Promisification

fication:使成为…,Promisification:使……成为promise
node.js常使用,promisify 是Node.js 标准库 util 模块中的一个函数,用于将遵循Node.js 回调风格的函数转换为返回Promise 的函数,可以使用 async/await 语法来等待异步操作完成,从而让异步代码看起来更像同步代码。

目的: 接受回调的函数 —————————> 一个 返回promise的函数
用法: loadScript(‘path/script.js’, (err, script) => {…} ) —————————> loadScriptPromise(‘path/script.js’).then(…)
在这里插入图片描述

promisify(f)

针对callback(err, result)只有两个参数的转化(最常用)

  1. 接受一个需要被 promise 化的函数 f,并返回一个包装函数(*)。
  2. 包装器返回一个 promise,并将调用转发给原始的 f,并在我们自定义的回调 (**) 中跟踪结果。
function promisify(f) {return function (...args) { // (*)    // ...args:srcreturn new Promise((resolve, reject) => {function callback(err, result) { // 我们对 f 的自定义的回调 (**)if (err) {reject(err);} else {resolve(result);}}args.push(callback); // 将我们的自定义的回调附加到 f 参数args的末尾,args:[src, callback]f.call(this, ...args); // 调用原始的函数,// call第一个参数this:调用原始函数时,保留原始函数(f)中对于 this 关键字的引用,保持上下文一致性。});};
}// 用法:
let loadScriptPromise = promisify(loadScript); // 返回一个包装函数 *
loadScriptPromise(...).then(...);  // loadScriptPromise传入src

微任务

  • 同步代码是指在当前执行上下文中按顺序执行的代码,不涉及异步操作。当 JavaScript 引擎执行到同步代码时,会一行一行地顺序执行,不会等待其他代码或事件的完成。
  • 宏任务是指由 JavaScript 引擎放入任务队列中的任务。它们通常包括整个脚本、setTimeout、setInterval、DOM 事件等。宏任务会在当前执行栈中的所有同步代码执行完毕后才会被执行。

异步任务需要管理,ECMA 标准规定了一个内部队列 PromiseJobs,通常被称为“微任务队列(microtask queue)”。

  • 队列(queue)先进先出
  • 只有在 JavaScript 引擎中没有其它任务在运行时,才开始执行任务队列中的任务。

示例1

promise 的处理程序 .then、.catch 和 .finally 都是异步的。 当一个 Promise 准备就绪(即状态变为
resolved 或 rejected)时,它的 .then()、.catch()、.finally() 等处理程序会被放入微任务队列中。

let promise = Promise.resolve();promise.then(() => alert("promise done!"));alert("code finished"); // 这个 alert 先显示

解析:

  1. let promise = Promise.resolve(); 创建了一个已经 resolved 的 Promise 对象。
  2. promise.then(() => alert("promise done!")); 给这个 Promise 添加了一个 .then() 回调函数。这个回调函数会在 Promise 状态变为 resolved 时执行,并被放入微任务队列中。
  3. alert("code finished"); 同步代码立即执行,显示 “code finished” 这个 alert。
  4. 当前的同步代码执行完毕后,JavaScript 引擎会检查微任务队列。微任务队列中有一个任务,即在前一步中添加到 Promise 的 .then() 回调函数。
  5. 执行微任务队列中的任务,即执行 .then() 回调函数,显示 “promise done!” 。

示例2: 未处理的 rejection

每个宏任务之后,引擎会立即执行微任务队列中的所有任务,然后再执行其他的宏任务,或渲染,或进行其他任何操作。

let promise = Promise.reject(new Error("Promise Failed!"));
setTimeout(() => promise.catch(err => alert('caught')), 1000);// Error: Promise Failed!
window.addEventListener('unhandledrejection', event => alert(event.reason));

解析:

  1. let promise = Promise.reject(new Error("Promise Failed!"))同步代码执行,创建了一个被reject的 Promise 对象。
  2. setTimeout 宏任务被触发,它会在至少 1 秒后将 回调函数添加到微任务队列中。
  3. window.addEventListener()同步执行,添加unhandledrejection 事件监听器,当 Promise 被拒绝且没有被捕获时,unhandledrejection 事件会作为一个宏任务被触发,显示“Promise Failed!”
  4. 所有同步代码执行完毕后,JavaScript 引擎开始执行微任务队列中的任务。这时,第二行代码中的回调函数promise.catch(err => alert('caught')) 被执行,它是一个微任务(会在当前宏任务执行完成后立即执行),显示“caught”。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/727302.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vite+vue3使用UEditorPlus ,后端PHP

vitevue3使用UEditorPlus 百度富文本编辑器是目前所有编辑器中功能最丰富的,但长时间不进行维护了。 之前写了一篇使用UEditor的教程,最近发现一个UEditorPlus,总结一下如何使用 什么是UEditorPlus 基于 UEditor 二次开发的富文本编辑器&…

猫冻干价格差距大的原因是什么?价格合理、性价比高的生骨肉冻干分享

科学养猫知识的普及,铲屎官们逐渐意识到了生骨肉冻干喂养的益处。然而,价格因素仍是部分铲屎官的阻碍。实际上,像我这样的资深铲屎官,早已认识到生骨肉冻干的价值。虽然价格略高于烘焙粮和膨化粮,但其对猫咪的益处是实…

四个有用的Android开发技巧

一. 通过堆栈快速定位系统版本 这个地方主要分享大家两个个技巧,通过问题堆栈简快速定位当前系统版本: 1. 快速区分当前系统版本是Android10以下,还是Android10及以上; 首先Android10及以上引入了一个新的服务Service&#xff…

13年测试老鸟,接口性能测试-压测总结汇总,一文概全...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、概述 性能测试…

如何禁止员工在上班时间利用电脑打游戏逛娱乐网站?

在现代化的工作环境中,电脑已成为员工日常工作的必需品。然而,一些员工可能在上班时间利用电脑进行非工作相关的活动,如打游戏或浏览娱乐网站。这不仅影响个人的工作效率,也可能对团队的整体绩效和公司的文化产生负面影响。因此&a…

python界面开发 - Radiobutton:单选按钮

文章目录 1. python图形界面开发1.1. Python图形界面开发——Tkinter1.2. Python图形界面开发——PyQt1.3. Python图形界面开发——wxPython1.4. Python图形界面开发—— PyGTK:基于GTK1.5. Python图形界面开发—— Kivy1.6. Python图形界面开发——可视化工具1.7. …

【Linux C | 网络编程】多播的概念、多播地址、UDP实现多播的C语言例子

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

如何选择适合您需求的虚拟主机服务

随着互联网的发展,虚拟主机服务在网站托管领域扮演着至关重要的角色。我们在前几天遇到客户咨询如何在Hostease服务商选择适合的主机服务。本文将介绍如何选择适合您需求的虚拟主机服务,以确保您的网站或应用程序能够稳定运行并获得最佳性能。 确定您的需…

常见的验证码

一、短信验证码 前端: 用户填写手机号,点击按钮发送请求用户短信得到验证码后,用户填写表单提交 form 表单,进行验证 后台: 随机生成几位验证码并将生成时间、手机号、验证码存储起来,可以存到session、…

小游戏加固方案已全面适配微信、QQ、抖音、快手、美团、华为、支付宝渠道

2023年,国内移动游戏收入与游戏用户规模双双创下历史新高。其中小游戏异军突起,市场规模达到200亿元,同比增长300%,成了万众瞩目的行业新风口。 小游戏的高速发展带来了更多的活力,产出了多款月流水过亿的热门游戏。行…

webpack编译报错Cannot find module ‘@babel/core‘且无法识别es6的reset语法

~ npm install babel-core babel-loader --save-dev 用了这个指令后webpack报错 尝试重新下载了babel-core babel-loader 还是不行 Cannot find module babel/core babel-loader8 requires Babel 7.x (the package babel/core). If youd like to use Babel 6.x (babel-core), …

Matter 笔记1-环境准备,编译

不要远程登录Ubuntu输入以下命令,原因:ubuntu/linux上的http代理设置 1. 准备 1.1 工具 Ubuntu 22.04 LTSClash 里General的端口设置到ubuntu 的网络设置里 1.2 代码 这里使用芯科整理过的代码 git clone https://github.com/SiliconLabs/matter.…

3. springboot中集成部署vue3

1. vue3构建 构建命令 npm run build&#xff0c; 构建的结果在disc目录&#xff1a; 2. springboot集成 2.1 拷贝vue3构建结果到springboot resources/static目录 2.2 springboot pom依赖 添加thymeleaf依赖 <dependency><groupId>org.springframework.boot</…

Rust错误处理和Result枚举类异常错误传递

Rust 有一套独特的处理异常情况的机制&#xff0c;它并不像其它语言中的 try 机制那样简单。 首先&#xff0c;程序中一般会出现两种错误&#xff1a;可恢复错误和不可恢复错误。 可恢复错误的典型案例是文件访问错误&#xff0c;如果访问一个文件失败&#xff0c;有可能是因…

乔琼:高性能会议传声器的产品优化设计| 演讲嘉宾公布

一、智能家居与会议系统 智能家居与会议系统分论坛将于3月28日同期举办&#xff01; 智能会议系统它通过先进的技术手段&#xff0c;提高了会议效率&#xff0c;降低了沟通成本&#xff0c;提升了参会者的会议体验。对于现代企业、政府机构和学术界是不可或缺的。在这里&#x…

arm系统构建的基础知识

目录 一、环境变量 二、归档和压缩 (一) 常用命令 (二) 常用参数 三、磁盘分区和挂载 四、网络管理 一、环境变量 显示环境变量 —— echo设置临时环境变量 —— exportecho $PATH —— 显示当前PATH环境变量 在当前目录下&#xff0c;编写一个hello.c 编译并运行。 图…

千帆AppBuilder使用指南-组件中心

应用中心 百度智能云千帆AppBuilder&#xff08;以下简称为AppBuilder&#xff09;应用中心&#xff0c;提供了大量可以立即体验的应用示例&#xff0c;开发者可以在这里搜索感兴趣的应用进行使用。 官方应用&#xff1a;AppBuilder官方提供的应用&#xff0c;可以立即体验应用…

【nowcoder】NC248 左叶子之和

NC248 左叶子之和 计算给定二叉树的左叶子之和。 树上叶子节点指没有后继节点的节点&#xff0c;左叶子指连向父节点的左侧的叶子节点。 int sumOfLeftLeaves(struct TreeNode* root ) {if (root ! NULL) {int sum 0;if (root->left ! NULL && root->left->…

【CSP试题回顾】201409-3-字符串匹配

CSP-201409-3-字符串匹配 关键点&#xff1a;<string>库函数的使用 length() 或 size(): 返回字符串的长度。 empty(): 检查字符串是否为空。 append() 或 : 向字符串的末尾添加字符或另一个字符串。 insert()在字符串的指定位置插入另一个字符串或字符。 std::str…

redis未设置密码被植入挖矿脚本

最近一台测试linux响应速度贼慢&#xff0c;检查发现cpu消耗高达100%&#xff01;查看进程杀死后过段时间又重启了&#xff0c;一时间也摸不到头绪。无意间发现启动redis的时候cpu瞬间拉到了100%&#xff0c;主要就是zzh和newinit.sh两个脚本。百度了一下说是被植入了挖矿脚本&…