如何正确触发RejectionHandled事件?

如何正确触发RejectionHandled事件?

正确触发rejectionhandled事件的技巧

rejectionhandled 事件在 Promise 被拒绝,且没有 catch 块捕获时触发。要成功触发此事件,请注意以下关键点:

异步环境:事件必须在宏任务(例如 setTimeoutsetInterval)执行完毕后触发,同步代码或微任务(Promise.then)中无法触发。未被捕获的拒绝:Promise 必须处于拒绝状态,且没有使用 catch 方法处理该拒绝。

常见错误及排查

根据经验,以下情况容易导致 rejectionhandled 事件无法触发:

在浏览器控制台中直接执行代码:控制台环境与实际运行环境不同,无法可靠地触发该事件。在同步代码或微任务中触发:必须在宏任务执行完成后才能触发。使用了 catch 块:catch 块会捕获 Promise 的拒绝,阻止 rejectionhandled 事件的触发。

示例代码:演示如何正确触发事件

以下代码演示了在满足所有条件的情况下,如何正确触发 rejectionhandled 事件:

const myPromise = new Promise((resolve, reject) => {  setTimeout(() => {    reject(new Error("Promise Rejected!"));  }, 200); // 使用setTimeout确保异步执行});window.addEventListener('rejectionhandled', (event) => {  console.log('Rejection Handled:', event.reason); // 输出错误信息});// 故意不使用catch,让Promise拒绝不被捕获setTimeout(() => {  myPromise.then(result => console.log("Promise resolved:", result));}, 100); // 确保在Promise拒绝后才执行

在这个例子中,rejectionhandled 事件会在 200 毫秒后触发,因为 Promise 被拒绝且没有被 catch 处理。 setTimeout 的使用确保了事件在宏任务环境下触发。

以上就是如何正确触发RejectionHandled事件?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1561582.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何用媒体查询控制屏幕缩放宽度来显示或隐藏DIV元素?
上一篇 2025年12月22日 06:37:28
Vue3中innerHTML渲染图片失败怎么办?
下一篇 2025年12月22日 06:37:32

相关推荐

  • CSS制作“正在加载”提示框

    这次给大家带来CSS制作“正在加载”提示框,CSS制作“正在加载”提示框的注意事项有哪些,下面就是实战案例,一起来看一下。  需求:               有时加载数据比较慢,页面一直没有反应,用户也许会不停的刷,而且用户体验也不好 解决:          在js中加入以下代码即可 //提示…

    2025年12月24日
    000
  • 关于CSS3的一些小知识

    本文主要和大家聊聊关于css3的一些小知识,希望能帮助到大家。下面跟随小编一起来看一下吧。 box-shadow向 p 元素添加阴影box-shadow: h-shadow v-shadow blur spread color inset;h-shadow:必需的。水平阴影的位置。允许负值v-sha…

    用户投稿 2025年12月24日
    000
  • css中hover做遮盖罩闪动问题

    css中hover做遮盖罩闪动问题css中hover做遮盖罩闪动问题css中hover做遮盖罩闪动问题css中hover做遮盖罩闪动问题

    这次给大家带来css中hover做遮盖罩闪动问题,css中hover做遮盖罩的注意事项有哪些,下面就是实战案例,一起来看一下。 具体代码如下所示: 你好 这是html代码部分,原本想做一个遮盖罩的效果,当鼠标移动到p2的时候,p3会出现微微遮一下p2. 所以最开始的css代码是这样的 做完后发现出了…

    2025年12月24日 用户投稿
    000
  • CSS的mask-image属性详解

    这次给大家带来CSS的mask-image属性详解,使用CSS的mask-image属性注意事项有哪些,下面就是实战案例,一起来看一下。 CSS mask遮罩属性的历史非常久远了,远到比CSS3 border-radius等属性还要久远,最早是出现在Safari浏览器上的,差不多可以追溯到09年。 …

    2025年12月24日
    000
  • CSS3的linear-gradient线性渐变使用方法

    这次给大家带来CSS3的linear-gradient线性渐变使用方法,使用CSS3的linear-gradient线性渐变注意事项有哪些,下面就是实战案例,一起来看一下。 在商城项目中,购物车是一个很重要的功能。其中最常见的是购物车中对库存的“+-”操作,包括抢购后面有很多算法。但是作为前端来说,…

    2025年12月24日
    000
  • CSS3的rem(设置字体大小)使用教程

    这次给大家带来CSS3的rem(设置字体大小)使用教程,使用CSS3的rem(设置字体大小)的注意事项有哪些,下面就是实战案例,一起来看一下。 css3新增了相对单位 rem ,使用rem同em一样皆为相对字体大小单位,不同的是rem相对的是HTML根元素。鉴于很多网友提到了rem,所以我这里就对其…

    2025年12月24日
    000
  • CSS的loading动画效果使用教程

    这次给大家带来CSS的loading动画效果使用教程,CSS的loading动画效果使用注意事项有哪些,下面就是实战案例,一起来看一下。 本文介绍了一份纯CSS loading效果代码示例,分享给大家,具体如下: 预览 代码 使用了CSS的keyframes自定义关键帧动画 Loading p#pr…

    2025年12月24日
    000
  • Css绘制扇形图案

    Css绘制扇形图案Css绘制扇形图案Css绘制扇形图案Css绘制扇形图案

    这次给大家带来Css绘制扇形图案,Css绘制扇形图案的注意事项有哪些,下面就是实战案例,一起来看一下。 阅读此文需具备基本数学知识:圆心角、弧度制、三角函数。 为实现如下效果呕心沥血: 当然你可以拥抱 Svg…在此分享如何纯 Css 打造圆环进度条,只需三步! 此物乃 2 + 1 夹心饼…

    2025年12月24日 用户投稿
    000
  • 纯css实现照片墙3D效果

    这次给大家带来纯css实现照片墙3D效果,纯css实现照片墙3D效果的注意事项有哪些,下面就是实战案例,一起来看一下。 直接上代码 1.准备材料: 准备材料就是没什么材料,自己麻溜赶快的去:百度找几张美女的照片来测试即可。 2.html代码: 照片墙 @@##@@ @@##@@ @@##@@ @@#…

    2025年12月24日
    000
  • CSS的滤镜实现火焰效果

    CSS的滤镜实现火焰效果CSS的滤镜实现火焰效果CSS的滤镜实现火焰效果CSS的滤镜实现火焰效果

    这次给大家带来CSS的滤镜实现火焰效果,CSS滤镜实现火焰效果的注意事项有哪些,下面就是实战案例,一起来看一下。 上次我们了解了一些css滤镜的基础知识,CSS滤镜 filter属性 这次我们就来用css的滤镜实现一个 火焰的效果。 解释 要实现上面的火焰效果,我们先来了解一些必要的东西。 上次我们…

    2025年12月24日 用户投稿
    000
  • css中sticker-footer布局如何使用

    这次给大家带来css中sticker-footer布局如何使用,使用css中sticker-footer布局的注意事项有哪些,下面就是实战案例,一起来看一下。 在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页…

    用户投稿 2025年12月24日
    100
  • CSS3的鼠标移入图片动态提示效果

    CSS3的鼠标移入图片动态提示效果CSS3的鼠标移入图片动态提示效果CSS3的鼠标移入图片动态提示效果CSS3的鼠标移入图片动态提示效果

    这次给大家带来CSS3的鼠标移入图片动态提示效果,实现CSS3鼠标移入图片动态提示效果的注意事项有哪些,下面就是实战案例,一起来看一下。 第一次尝试着写博客,不好或者有误的地方希望大家多多指正呐,今天主要写的是关于CSS3的一个重要属性transform的一些用法,这些例子是之前在慕课网上学习某位老…

    2025年12月24日 用户投稿
    000
  • css3做出半圆弧线

    这次给大家带来css3做出半圆弧线,css3做出半圆弧线的注意事项有哪些,下面就是实战案例,一起来看一下。 本文介绍了css3实现画半圆弧线的示例代码,分享给大家,具体如下: css代码 .circle1 { width: 100px; height: 200px; border: 1px soli…

    2025年12月24日
    000
  • css3文字渐变动画

    css3文字渐变动画css3文字渐变动画css3文字渐变动画css3文字渐变动画

    这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下。 利用css3这个属性(背景剪裁): background-clip: border-box || padding-box || context-box || no-clip || text…

    2025年12月24日 用户投稿
    100
  • CSS3做出条纹大背景

    CSS3做出条纹大背景CSS3做出条纹大背景CSS3做出条纹大背景CSS3做出条纹大背景

    这次给大家带来CSS3做出条纹大背景,使用CSS3做出条纹大背景的注意事项有哪些,下面就是实战案例,一起来看一下。 1. 实现不等宽背景条纹: .cont{width: 500px;height: 200px;background: linear-gradient(#78C9DB 70%,#0acf…

    2025年12月24日 用户投稿
    100
  • css3的动画序列animation

    css3的动画序列animationcss3的动画序列animationcss3的动画序列animationcss3的动画序列animation

    这次给大家带来css3的动画序列animation,使用css3动画序列animation的注意事项有哪些,下面就是实战案例,一起来看一下。 首先复习一下animation动画添加各种参数 (1)infinite参数,表示动画将无限循环。在速度曲线和播放次数之间还可以插入一个时间参数,用以设置动画延…

    2025年12月24日 用户投稿
    000
  • 用css隐藏input的光标

    这次给大家带来用css隐藏input的光标,用css隐藏input的光标的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 最近公司的ui突然跑过来问我一个问题:“如何在不影响操作的情况下,把input的光标隐藏了?”。 我相信很多人会跟我一样,觉得这是个什么狗屁需求,输入框不要光标这不是反人…

    2025年12月24日
    000
  • 纯css3代码实现多个元素依次显示

    这次给大家带来纯css3代码实现多个元素依次显示,纯css3代码实现多个元素依次显示的注意事项有哪些,下面就是实战案例,一起来看一下。 如上图所示,在许多的活动宣传html5中会经常需要用到这样的一个动画效果。特别是快到年底了,也许有同学正在为了公司的活动页面而忙碌,get到这样一个小技能说不定刚好…

    2025年12月24日
    100
  • css实现缩略图悬停界面

    这次给大家带来css实现缩略图悬停界面,css实现缩略图悬停界面的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 前端本身很杂,想必在学前端的大家都懂,前端技能的各种学习心得,各种教程,只要你有一颗学习的心都可以搞定,关键在于你有没有需求分析的能力,解决问题的能力,这两个才是决定工资高低的本…

    2025年12月24日
    000
  • CSS里BFC的神奇之处。

    CSS里BFC的神奇之处。CSS里BFC的神奇之处。CSS里BFC的神奇之处。CSS里BFC的神奇之处。

    这次给大家带来CSS里BFC的神奇之处。,在CSS里使用BFC的注意事项有哪些,下面就是实战案例,一起来看一下。 在写样式时,往往是添加了一个样式,又或者是修改了某个属性,就达到了我们的预期。 而BFC就潜藏在其中,当你修改样式时,一不小心就能触发它而毫无察觉,因此没有意识到BFC的神奇之处。 一、…

    2025年12月24日 用户投稿
    000

发表回复

登录后才能评论
关注微信