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 二次开发的富文本编辑器&…

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

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

MapStruct 教程

MapStruct 教程 一、MapStruct 简介 MapStruct 是一个基于约定的代码生成器,用于在 Java bean 类型之间进行转换。它极大地简化了对象之间的映射过程,减少了手动编写映射代码的工作量。MapStruct 通过注解处理器在编译时生成映射代码,因此运…

图片优化总结

1 调整大小 仅该接口:decodeResource 大小根据车机分辨率和图片对应的文件夹来决定的(drawbledrawblemdpi1) scale (float) targetDensity / density; Bitmap内存占用 ≈ 像素数据总大小 图片宽 x 图片高 x(设备分辨率/资源目录分辨率) x 每…

四个有用的Android开发技巧

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

Go语言聊天室demo

Go语言聊天室demo 话不多说直接上代码 话不多说直接上代码 Tcp服务端 package mainimport ("container/list""encoding/json""fmt"uuid "github.com/satori/go.uuid""net""strings" )type GlobalConnInfo struc…

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. …

前端工程部署步骤小记

安装mqtt: “mqtt”: “^4.3.7”, npm install git panjiacheng 后台demo下载zip 1、npm install --registryhttps://registry.npmmirror.com 2、npm run dev 前端demo创建 1、安装npm 2、npm install vuenext 3、npm install -g vue/cli 查看版本 vue --version 4、更新插件…

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

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

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

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

vscode的c++开发环境配置

主要是安装一些插件,c/c开发常用的插件有如下几个: 插件名称功能C/CC 和 C的编译环境C/C SnippetsC/C重用代码块C/C Advanced LintC/C静态检测Code Runner代码运行Include AutoComplete自动头文件包含Rainbow Brackets彩虹花括号,有助于阅读…

常见的验证码

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

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

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

Linux下Qt程序打包发布

如何打包 注意事项 可能遇到的问题 如何打包: 1、先下载linuxdeployqt工具,下载链接:https://github.com/probonopd/linuxdeployqt/releases 选择最后release的版本,然后执行命令: sudo chmod 777 linuxdepl…

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), …

Gson(List<Object>转String 、String转List<Object>)

要在Java项目中使用Gson库&#xff0c;你需要添加相应的依赖项。以下是在Maven项目的pom.xml文件中添加Gson依赖的示例&#xff1a; <dependencies><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId>&l…

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

不要远程登录Ubuntu输入以下命令&#xff0c;原因&#xff1a;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</…