首页 > 其他分享 >通过可视化彻底搞懂 Promise执行逻辑

通过可视化彻底搞懂 Promise执行逻辑

时间:2024-07-17 09:21:27浏览次数:7  
标签:resolve PromiseResult PromiseState 可视化 promise reject Promise 搞懂

JavaScript 中的 Promise 一开始可能会让人感到有些难以理解,但是如果我们能够理解其内部的工作原理,就会发现它们其实是非常易于掌握的。

在这篇博客文章中,我们将深入探讨 Promise 的一些内部机制,并探索它们是如何使得 JavaScript 能够执行非阻塞的异步任务。

一种创建 Promise 的方式是使用 new Promise 构造函数,它接收一个执行函数,该函数带有 resolve 和 reject 参数。

new Promise((resolve, reject) => {
    // TODO(Lydia): Some async stuff here
 });

当 Promise 构造函数被调用时,会发生以下几件事情:

当 Promise 构造函数被调用时,会发生以下几件事情:

  • 创建一个 Promise 对象。这个 Promise 对象包含几个内部槽,包括 [[PromiseState]][[PromiseResult]][[PromiseIsHandled]][[PromiseFulfillReactions]] 和 [[PromiseRejectReactions]]

  • 创建一个 Promise 能力记录。这个记录 “封装” 了 Promise,并增加了额外的功能来 resolve 或 reject promise。这些功能可控制 promise 的最终 [[PromiseState]] 和 [[PromiseResult]] ,并启动异步任务。

  • 我们可以通过调用 resolve 来解决这个 Promise,这是通过执行函数可以实现的。当我们调用 resolve 时:

    • [[PromiseState]] 被设置为 “已实现”(fulfilled)。

    • [[PromiseResult]] 被设置为我们传递给 resolve 的值,在这种情况下是 “完成!”(Done!)。

    • 调用 reject 时的过程类似,现在 [[PromiseState]] 被设置为 “已拒绝”(rejected),并且 [[PromiseResult]] 被设置为我们传递给 reject 的值,这是 “失败!”(Fail!)。
    • 当然很好。但是,使用函数来改变对象内部属性有什么特别的呢?

      答案就在与我们目前跳过的两个内部槽相关的行为中:[[PromiseFulfillReactions]] 和 [[PromiseRejectReactions]]

      [[PromiseFulfillReactions]] 字段包含 Promise Reactions。这是一个通过将 then 处理程序链接到 Promise 而创建的对象。

      此 Promise Reaction 包含一个 [[Handler]] 属性,其中包含我们传递给它的回调。当 promise resolve 时,该处理程序会被添加到微任务队列中,并可访问 promise 解析时的值。

标签:resolve,PromiseResult,PromiseState,可视化,promise,reject,Promise,搞懂
From: https://www.cnblogs.com/webljl/p/18306553

相关文章

  • js需要同时发起百条接口请求怎么办?--通过Promise实现分批处理接口请求
    如何通过Promise实现百条接口请求?实际项目中遇到需要发起上百条Promise接口请求怎么办?前言不知你项目中有没有遇到过这样的情况,反正我的实际工作项目中真的遇到了这种玩意,一个接口获取一份列表,列表中的每一项都有一个属性需要通过另一个请求来逐一赋值,然后就有了这份封装真......
  • R语言极值分析:GEV与GPD模型与MCMC的海洋观测数据极值模拟可视化研究
    全文链接:https://tecdat.cn/?p=37007原文出处:拓端数据部落公众号在海洋科学领域,极端天气和海洋事件如极端海浪、风暴潮和海啸等,对沿海社区、基础设施及生态环境构成了重大威胁。准确预测和评估这些极端事件的强度和频率,对于制定有效的防灾减灾策略至关重要。极值分析作为统......
  • 免费的可视化工具哪里找?看过来!
    面对海量的数据,我们应该如何高效地提取其价值,让复杂的信息一目了然?这正是可视化工具大显身手的舞台。今天,我就来分享几款非常好用的数据可视化工具,它们不仅能够帮助你轻松驾驭数据,还能让你的工作汇报、项目展示更加生动、专业。 一、山海鲸可视化 二维项目制作和私有化部署......
  • GIS需要进行场景编辑?来试试这款免费可视化工具
    如果你正苦恼于如何搞定GIS场景编辑,不妨来试试这款免费可视化工具——山海鲸可视化。经过本人测试,这款软件在GIS场景编辑上完全可以做到“零代码”操作,即使没有任何编程技能也可以在三维GIS世界中如鱼得水。现在,让我们一起来看看这款免费可视化工具如何满足你的GIS场景编辑需求,顺......
  • (开源)都进来!简单易懂、功能强大的权限+可视化流程管理系统
    1、预览地址:http://139.155.137.144:90122、qq群:801913255一、前言随着网络的发展,企业对于信息系统数据的保密工作愈发重视,不同身份、角色对于数据的访问权限都应该大相径庭。列如1、不同登录人员对一个数据列表的可见度是不一样的,如数据列、数据行、数据按钮等......
  • JavaScript Promise.withResolvers API All In One
    JavaScriptPromise.withResolversAPIAllInOnePromise.withResolvers()https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolversdemoscancelablePromise/cancelFetchrequest(......
  • 数据可视化是如何在智慧医疗中应用的?
    在现代智慧医疗的推动下,数据可视化技术正日益成为医疗领域的重要工具。通过将复杂的医疗数据转换为直观的图表和图形,数据可视化不仅提升了医疗服务的效率,还极大地改善了患者的就医体验。在智慧医疗中,数据可视化首先在电子病历管理方面发挥了重要作用。医生可以通过直观的图表快......
  • 数据分享|python分类预测职员离职:逻辑回归、梯度提升、随机森林、XGB、CatBoost、LGB
    全文链接:https://tecdat.cn/?p=34434原文出处:拓端数据部落公众号分析师:ShilinChen离职率是企业保留人才能力的体现。分析预测职员是否有离职趋向有利于企业的人才管理,提升组织职员的心理健康,从而更有利于企业未来的发展。解决方案任务/目标采用分类这一方法构建6种模型对职......
  • 数据分享|R语言决策树和随机森林分类电信公司用户流失churn数据和参数调优、ROC曲线可
    原文链接:http://tecdat.cn/?p=26868最近我们被客户要求撰写关于电信公司用户流失的研究报告,包括一些图形和统计输出。在本教程中,我们将学习覆盖决策树和随机森林。这些是可用于分类或回归的监督学习算法下面的代码将加载本教程所需的包和数据集。  library(tidyverse)......
  • Franka Robot - FAQ - rviz可视化问题
    在VMware中运行Ubuntu20.04并使用ROSNoetic和Gazebo时,如果遇到Gazebo无法显示的问题,可能有以下几个原因及对应的解决方案:1.硬件加速和3D图形设置VMware的3D图形加速设置可能会影响Gazebo的显示。确保在VMware中启用了3D加速。检查和启用3D加速:打开VMware并选择你的Ubuntu......