ES6:promise基本使用讲解

一、Promis简介

1.是什么

Promise 是异步编程的一种解决方案。在ES6中,promise对象是一个构造函数,用来生成promise实例。

2.为什么需要promise

在出现promise之前,JS没有一个统一的、标准的异步编程模式,各种库和框架各自采用不同的模式进行异步操作,十分混乱。

常见的异步操作方式例如回调函数,会随着异步操作的复杂度变高而出现“回调地狱”,指的是过度使用嵌套回调函数来处理异步操作导致代码的可读性、维护性差。例如

asyncFunction1(function(result1) {asyncFunction2(result1, function(result2) {asyncFunction3(result2, function(result3) {// 更多嵌套的回调函数...});});
});

3.promise的三种状态

pending(理解成准备中/进行中/未完成都行)、fulfilled(已成功)和rejected(已失败)

promise只能从pending=>fulfilled或者是pending=>rejected,状态一但改变就不可逆转

4.基本使用

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。下面是一个基于promise的请求:

    <script>// 创建一个基于Promise的异步请求函数function makeAsyncRequest(url) {// 返回一个Promise对象return new Promise((resolve, reject) => {// 使用fetch发送请求fetch(url).then((response) => {// 检查响应状态码if (!response.ok) {// 如果状态码不是200-299之间,则抛出错误throw new Error("错误");}// 否则解析响应体return response.json();}).then((data) => {// 请求成功,解析出数据后,通过resolve返回数据resolve(data);}).catch((error) => {// 请求失败或处理响应出错时,通过reject返回错误reject(error);});});}// 使用异步请求函数makeAsyncRequest("https://demo.com/data").then((data) => {// 请求成功,处理返回的数据console.log("成功:", data);}).catch((error) => {// 请求失败,处理错误console.error("失败:", error);});</script>

resolve函数:将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去

reject函数:将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

then方法:可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的,不一定要提供。它们都接受Promise对象传出的值作为参数。

二、promise的方法

1.promise.then()

.then()方法用于指定Promise在fulfilled(已成功)状态下的回调函数,它可以链接多个.then()来形成执行链。如果Promise被reject,后续的.catch()或者.then()中的错误处理函数会被调用。

<script>
promise.then((result) => {// 当前Promise成功后的处理逻辑
}, (error) => {// 或者直接链式写法处理错误情况(现在推荐分开使用catch处理错误)
});// ES6建议的写法,将成功的处理和错误的处理分离
promise.then((result) => {// 成功处理
}).catch((error) => {// 失败处理
});
</script>

2.promise.catch()

.catch()方法用来处理Promise在rejected状态时的回调函数,它是.then(null, rejectionHandler)的简写形式,专门用于捕获前面链中任何.then()的错误。

promise.catch((error) => {// 处理Promise的rejected状态,即异常或错误情况
});

3.promise.finally()

promise.finally()方法无论Promise最后的状态如何,都会执行提供的回调函数,常用于资源清理或UI恢复等场景。

promise.finally(() => {// 不管Promise最终是fulfilled还是rejected都会执行的代码
});

4.promise.resolve() 和 promise.reject()

这两个方法实际上是全局静态方法,而非实例方法:


创建并返回一个已经resolved的Promise,通常用于将非Promise值转换为Promise,或者快速返回一个成功的Promise。

Promise.resolve(reason);

创建并返回一个已经被rejected的Promise,用于快速抛出错误。

Promise.reject(reason);

5.promise.all()

.all()方法接收一个Promise数组作为参数,当所有Promise都fulfilled时,返回的新的Promise才会fulfilled,并带有所有Promise的结果组成的数组。只要其中一个Promise rejected,则返回的Promise立即rejected。

Promise.all(promisesArray).then(values => {// 所有Promise都fulfilled时执行
}).catch(error => {// 只要有一个Promise rejected就执行
});

6.promise.race()

.race()方法同样接收Promise数组,当其中任意一个Promise fulfilled或rejected时,返回的新Promise就会采用相同的状态,并返回那个率先改变状态的Promise的结果或错误原因。

Promise.race(promisesArray).then(value => {// 只要有一个Promise fulfilled就执行
}).catch(error => {// 第一个rejected的Promise的错误原因
});

7.promise.allSettled()

.allSettled()方法接收一个Promise数组,当所有Promise都settled(即完成,无论是fulfilled还是rejected)时,返回的新的Promise会fulfilled,并带有所有Promise的结果对象组成的数组,每个结果对象包含status("fulfilled"或"rejected")和value(如果是fulfilled时的结果值)或reason(如果是rejected时的错误原因)属性。

Promise.allSettled(promisesArray).then(results => {// 所有Promise都settled(无论是fulfilled还是rejected)时执行
});

8.promise.any()(ES2021引入)

.any()方法也是接收一个Promise数组,只要其中任何一个Promise fulfilled,返回的Promise就会以该Promise的结果fulfilled;但如果所有Promise都rejected,则返回的Promise将以AggregateError rejected(AggregateError是一种内置错误类型,它表示一组错误的集合,通常用于一次性报告多个错误的情况)。

Promise.any(promisesArray).then(value => {// 只要有一个Promise fulfilled就执行
}).catch(error => {// 如果所有Promise都rejected,则返回AggregateError
});

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

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

相关文章

idea中jdk版本的配置

配置JDK版本的步骤如下&#xff1a; 下载JDK安装文件&#xff1a;首先&#xff0c;需要从Oracle官方网站&#xff08;https://www.oracle.com/java/technologies/javase-jdk8-downloads.html&#xff09;下载适合您操作系统的JDK版本。 安装JDK&#xff1a;双击下载的安装文件…

什么是 DNS 记录?

DNS记录是存储在DNS服务器上的文本指令。它们表明与一个域名相关的IP地址&#xff0c;也可以提供其他信息。DNS记录是计算机用语&#xff0c;指域名系统&#xff08;Domain Name System&#xff0c;简称DNS&#xff09;中的一条记录&#xff0c;这条记录存储于DNS服务器中。每一…

【LeetCode热题100】【二叉树】翻转二叉树

题目链接&#xff1a;226. 翻转二叉树 - 力扣&#xff08;LeetCode&#xff09; 就是交换两颗子树&#xff0c;二叉树都递归就行 class Solution { public:TreeNode *invertTree(TreeNode *root) {if (!root)return nullptr;swap(root->left, root->right);invertTree(…

全自动ai生成视频源码,利用AI大模型,一键生成高清短视频

MoneyPrinterTurbo-基于Python全自动ai生成视频源码&#xff0c;利用AI大模型&#xff0c;一键生成高清短视频&#xff0c;只需提供一个视频 主题 或 关键词 &#xff0c;就可以全自动生成视频文案、视频素材、视频字幕、视频背景音乐&#xff0c;然后合成一个高清的短视频。 地…

QT 线程的使用

1.头文件&#xff1a; #include<QThread> 2.在.h文件中定义全局&#xff1a; QThread* threadTraj; void threadTrajProcess();//回调函数 3.在.cpp文件中&#xff1a; threadTraj new QThread();//初始化 //连接槽函数 QObject::connect(threadTraj, &QThre…

15:00面试,15:08就出来了,技术官问我什么是K8s的命令式和声明式资源管理!

15:00面试&#xff0c;15:08就出来了&#xff0c;技术官问我什么是K8s的命令式和声明式资源管理&#xff01; Kubernetes&#xff08;通常缩写为K8s&#xff09;是一个强大的容器编排系统&#xff0c;它允许开发者和运维团队以可伸缩、灵活的方式部署和管理应用程序。在Kubern…

redis bigKey问题

bigKey的产生 1、使用String存储了大文件的二进制。 2、使用集合没有考虑到数据的规模&#xff0c;或者规模的增长。 3、哈希中冗余了大量键值对。 bigKey问题 1、操作大key时会阻塞线程&#xff1a;redis是单线程。 2、网络阻塞&#xff1a;在网络中占用大量网络流量。 …

【Java】maven对项目的拆分聚合

把mvc项目进行拆分,原来是通过包名进行分层的,现在再Maven项目里,我们可以通过Maven工具,进一步的拆分,怎么分呢? 把Dao层,Service层,Controller和View层的代码,各自拆分成一个一个的表现上独立的工程来。 拆分后的工程分别是&#xff1a;mvc-dao , mvc-service , mvc-web 三…

【示例】Spring-AOP理解

前言 本文不仅介绍Spring中AOP的几种实现方式。还整体介绍一下&#xff1a;静态代理、JDK API动态代理和CGLIB动态代理 文中示例的代码地址&#xff1a; GitHubhttps://github.com/Web-Learn-GSF/Java_Learn_Examples父工程Java_Framework_Spring 静态代理、动态代理*2 他…

c++ - 运算符重载

文章目录 一、运算符重载的关键字和注意点二、重载 运算符三、重载 运算符四、重载 运算符五、重载前置 和 后置 运算符六、重载 << >>运算符 一、运算符重载的关键字和注意点 C为了增强代码的可读性引入了运算符重载&#xff0c;运算符重载是具有特殊函数名的函…

CANFD通讯数据64字节,强制成结构体类型的做法---用C语言

在处理通信数据时&#xff0c;特别是当数据按照特定结构体的布局在网络上传输时&#xff0c;你可能需要将接收到的字节流转换为相应的结构体类型。这里是如何在C语言中强制将接收到的64字节数据转换为结构体类型的一个示例&#xff1a; #include <stdio.h> #include <…

【JavaEE】浅谈线程(一)

线程 前言线程的由来线程是什么线程的属性线程更高效的原因举个例子&#xff08;线程便利性的体现&#xff09; 多线程代码线程并发执行的代码jconsole(观测多线程) 线程的调度问题创建线程的几种方法1&#xff09;通过继承Thread 重写run2&#xff09;使用Runnable接口 重写ru…

MySQL 上亿大表,如何深度优化?

背景 分析 测试 实施 索引优化后 delete大表优化为小批量删除 总结 前段时间刚入职一家公司&#xff0c;就遇上这事&#xff01; 背景 XX实例&#xff08;一主一从&#xff09;xxx告警中每天凌晨在报SLA报警&#xff0c;该报警的意思是存在一定的主从延迟&#xff08;…

【Node】Node的配置文件的使用,dotenv框架的使用

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;Node.js &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继续前进的勇…

Kotlin基础学习

学习 Kotlin 是一个很好的选择&#xff0c;它是一种现代的、静态类型的编程语言&#xff0c;旨在与 Java 和 Android 平台无缝集成&#xff0c;并提供更简洁、更安全的语法。以下是你可以开始学习 Kotlin 的基础知识的步骤&#xff1a; 了解 Kotlin 的基础语法&#xff1a; 学习…

linux-docker安装nginx

1.拉取镜像&#xff1a; docker pull nginx2.创建挂在路径&#xff1a; mkdir -p /usr/local/nginx/conf mkdir -p /usr/local/nginx/logs mkdir -p /usr/local/nginx/www mkdir -p /usr/local/nginx/conf.d 3.启动镜像:为了拿到位置文件&#xff0c;先启动下 docker run -…

2024 EasyRecovery易恢复 帮你轻松找回回收站删除的视频

随着数字化时代的到来&#xff0c;我们的生活和工作中越来越依赖于电子设备。然而&#xff0c;电子设备中的数据丢失问题也随之而来。数据丢失可能是由各种原因引起的&#xff0c;如硬盘故障、病毒感染、误删除等。面对这种情况&#xff0c;一个高效、可靠的数据恢复工具变得尤…

智慧农场牧场认养系统畜牧养殖积分签到直播监控农资商城养鸡APP小程序支持定制

每日签到&#xff1a;用户每天签到可以获取积分&#xff0c;连续签到7天还有惊喜奖品&#xff0c;这有助于增加用户粘性和活跃度。 我的鸡崽&#xff1a;这一功能以动画形式展示用户的鸡崽状态&#xff0c;新用户可以通过购物满额获得鸡苗&#xff0c;并通过饲喂动作参与鸡的成…

Netty NioEventLoop详解

文章目录 前言类图主要功能NioEventLoop如何实现事件循环NioEventLoop如何处理多路复用Netty如何管理Channel和Selector管理Channel管理Selector注意事项 前言 Netty通过事件循环机制(EventLoop)处理IO事件和异步任务&#xff0c;简单来说&#xff0c;就是通过一个死循环&…

vue3 开发中遇到的问题

1. element-plus的el-popover内置el-select组件&#xff0c;如何避免关闭el-popover 在el-select内置上面添加:teleported"false"就可以避免在点击el-select时候&#xff0c;把el-popver给关闭了 2. validate-on-rule-change&#xff1a;是否在 rules 属性改变后…