js【详解】Promise

为什么需要使用 Promise ?

传统回调函数的代码层层嵌套,形成回调地狱,难以阅读和维护,为了解决回调地狱的问题,诞生了 Promise

什么是 Promise ?

Promise 是一种异步编程的解决方案,本身是一个构造函数

console.log(Promise); // [Function: Promise]

自带resolve,reject,all 等方法,其原型上还有then、catch等方法。

Promise 的三种状态及其变化

  1. pending 进行中,不会触发 then 和 catch 回调函数
  2. resolved / fulfilled 已成功,会触发后续的 then 回调函数
  3. rejected 已失败,会触发后续的 catch 回调函数
    在这里插入图片描述

Promise 的状态变化如上图所示,不可逆

  • Promise 最初的状态是 pending

  • pending 状态的 Promise 执行 resolve() 后,状态变为 resolved

    Promise.resolve(); // Promise 的状态从 pending 变为 resolved
    
  • resolved 状态的 Promise 会触发后续的 then 函数,

    • 若 then 函数内没有报错,则返回一个 resolved 状态的 Promise

      Promise.resolve().then(() => {}); // 最终 Promise 的状态为 resolved
      
    • 若 then 函数内报错,则返回一个 rejected 状态的 Promise

      Promise.resolve().then(() => {throw new Error("then函数出现报错");
      }); // 最终 Promise 的状态为 rejected
      
  • pending 状态的 Promise 执行 reject() 后,状态变为 rejected

    Promise.reject(); // Promise 的状态从 pending 变为 rejected
    
  • rejected 状态的 Promise 会触发后续的 catch 函数,

    • 若 catch 函数内没有报错,则返回一个 resolved 状态的 Promise

      Promise.reject().catch(() => {}); // 最终 Promise 的状态为 resolved
      
    • 若 catch 函数内报错,则返回一个 rejected 状态的 Promise

      Promise.reject().catch(() => {throw new Error("catch函数出现报错");
      }); // 最终 Promise 的状态为 rejected
      

Promise 自测题

在这里插入图片描述
此时仅创建了 Promise 对象,没有执行 resolve() 或 reject(),所以状态是 pending

在这里插入图片描述

  • 因 setTimeout 是异步任务,内部代码在打印完 p2 后才执行,所以在打印 p2 时,Promise 还没执行 resolve() ,状态是 pending。
  • 打印完 p2 后,setTimeout 内的 resolve() 执行,Promise 的状态变为 resolved

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

自然语言处理之语言模型(LM)介绍

自然语言处理(Natural Language Processing,NLP)是人工智能(Artificial Intelligence,AI)的一个重要分支,它旨在使计算机能够理解、解释和生成人类语言。在自然语言处理中,语言模型&…

阿珊详解Vue Router的守卫机制

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【漏洞复现】Salia PLCC cPH2 远程命令执行漏洞(CVE-2023-46359)

0x01 漏洞概述 Salia PLCC cPH2 v1.87.0 及更早版本中存在一个操作系统命令注入漏洞,该漏洞可能允许未经身份验证的远程攻击者通过传递给连接检查功能的特制参数在系统上执行任意命令。 0x02 测绘语句 fofa:"Salia PLCC" 0x03 漏洞复现 ​…

2024 年 3 月 每日分享

文章目录 3 月 9 日3 月 8 日3 月 7 日3 月 6 日3 月 5 日3 月 4 日3 月 3 日3 月 2 日3 月 1 日 每日分享栏目 发现一些不错的资源,你有好的发现可以评论留言或私信我。 3 月 9 日 Linux 101 本书由中国科学技术大学 Linux 用户协会的数名优秀成员协力编写。用于…

video视频播放

1.列表页面 <template><div><ul><li class"item" v-for"(item,index) in list" :key"index" click"turnPlay(item.videoUrl)"><img :src"item.img" alt""><div class"btn…

套接字编程 --- 一

目录 1. 预备知识 1.1. 端口号 1.2. 认识TCP协议 1.3. 认识UDP协议 1.4. 网络字节序 2. socket 2.1. socket 常见系统调用 2.1.1. socket 系统调用 2.1.2. bind 系统调用 2.1.3. recvfrom 系统调用 2.1.4. sendto系统调用 2.3. 其他相关接口 2.3.1. bzero 2.3.2…

力扣:17. 电话号码的字母组合

力扣&#xff1a;17. 电话号码的字母组合 描述 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输…

js中flat(), flatMap()方法

flat() 深度递归遍历数组&#xff0c;并将所有元素与遍历到的子数组中的元素合并为一个新数组返回 用法 const newArr arr.flat(num) const newArr2 [1, 2, 3, [a]].flat()//[1, 2, 3, a]const newArr [1, 2, 3, [a, b, c, [Aa]]].flat(2)//[1,2,3,"a","b&qu…

maven高级教程与父子工程搭建

maven高级教程与父子工程搭建 父子项目搭建 [SpringBoot] 父子项目搭建,过滤多模块发布到私仓 maven继承和传递依赖 maven继承和传递依赖 其他问题 优雅修改多模块maven项目中版本号 解决执行maven命令时提示Process terminated的问题

Linux——文件重定向

目录 前言 一、重定向 二、重定向的运用 三、dup2 四、命令行中的重定向 五、为什么要有标准错误 前言 在之前我们学习了文件标识符&#xff0c;直到close可以使用文件标识符进行关闭&#xff0c;但是当我们关闭1号&#xff08;stdout&#xff09;时&#xff0c;无法往显…

00在linux环境下搭建stm32开发环境

文章目录 前言一、环境搭建1.arm-none-eabi-gcc2.openocd 三、创建stm32标准库工程1.创建工程目录2.修改stm32_flash.ld文件3.写makefile文件4.修改core_cm3.c5.写main函数并下载到板子上 最后 前言 我在那天终于说服自己将系统换成了linux系统了&#xff0c;当换成了linux系统…

如何清除keep-alive缓存

在 Vue.js 中&#xff0c;使用 <keep-alive> 组件可以将组件保留在内存中&#xff0c;以避免重复渲染和销毁&#xff0c;从而提高性能。如果需要手动清除 <keep-alive> 组件的缓存&#xff0c;可以通过两种方法来实现&#xff1a; 通过 $destroy 方法销毁组件&…

UE5.1_使用技巧(常更)

UE5.1_使用技巧&#xff08;常更&#xff09; 1. 清除所有断点 运行时忘记蓝图中的断点可能会出现运行错误的可能&#xff0c;务必运行是排除一切断点&#xff0c;逐个排查也是办法&#xff0c;但是在事件函数多的情况下会很复杂且慢节奏&#xff0c;学会一次性清除所有很有必…

JavaWeb--Mybatis

一&#xff1a;Mybatis概述 1.Mybatis概念 MyBatis 是一款优秀的 持久层框架 &#xff0c;用于简化 JDBC 开发&#xff1b; MyBatis 本是 Apache 的一个开源项目 iBatis, 2010 年这个项目由 apache software foundation 迁移到了 google code&#xff0c;并且改名为 MyB…

OpenTenBase 开发环境搭建及Debug设置

最近有个 OpenTenBase开源核心贡献挑战赛 领导建议大家都去试试&#xff0c;我也去凑了下热闹&#xff0c;发现能力有限一时半会是搞不明白了&#xff0c;最多也就是能搞搞文档翻译&#xff0c;或者写点操作手册啥的。 不过不管怎么样&#xff0c;先把开发环境搭上&#xff0c;…

R语言的数据类型与数据结构:向量、列表、矩阵、数据框及操作方法

R语言的数据类型与数据结构&#xff1a;向量、列表、矩阵、数据框及操作方法 介绍向量列表矩阵数据框 介绍 R语言拥有丰富的数据类型和数据结构&#xff0c;以满足各类数据处理和分析的需求。本文将分享R语言中的数据类型&#xff0c;包括向量、列表、矩阵、数据框等&#xff…

【深度学习模型】6_3 语言模型数据集

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 6.3 语言模型数据集&#xff08;周杰伦专辑歌词&#xff09; 本节将介绍如何预处理一个语言模型数据集&#xff0c;并将其转换成字符级…

vue组件之间通信方式汇总

方式1&#xff1a;props和$emit props和$emit仅仅限制在父子组件中使用 1.props&#xff1a;父组件向子组件传递数据 1.1 代码展示 <template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>…

giffgaff怎么充值?giffgaff怎么续费?

-性价比高&#xff1a;0月租&#xff0c;免费接收短信&#xff0c;充值一次&#xff0c;接码可以用20年以上&#xff08;仅需半年保号一次&#xff09;&#xff0c;可能是国内性价比最高的接码实体卡&#xff01;-安全&#xff1a;实体卡无须担心因号码被风控&#xff0c;还可以…

springboot+vue,上传图片,回显,以及报错404的问题

最近遇到一个问题&#xff0c;上传图片到服务器以后&#xff0c;回显不了&#xff0c;报错404&#xff1b; 历时三天终于找到解决办法&#xff1a; 1.后端代码&#xff1a; RestController RequestMapping("file") SuppressWarnings({"unchecked","…