前端 JS 经典:Promise 详解

1. Promise 由来

在以前我们实现异步是用的回调函数,当一个异步请求需要依赖上一个异步请求返回的结果的时候,就会形成如下这种的调用结构。

请求1(function (结果1) {请求2(function (结果2) {请求3(function(结果3)) {请求4(function(结果4) {})}});
});

这种结构看着很杂乱且不易维护,被我们亲切的叫做 “回调地狱”。为了解决回调地狱的问题,Promise 就诞生了。

Promise 诞生的使命:优雅的去表示异步回调

2. Promise 基础概念

2.1 创建 promise 实例

Promise 是一个构造函数,所以我们在调用一个 Promsie 的时候,要用 new Promsie 的方式去调用。

const ps = new Promise();

new Promise 接受一个函数类型的参数。这个函数又接收两个参数 resolvereject,分别对映成功回调和失败回调。Promise 内部有 3 种状态 pending(进行时)fulfilled(已成功)rejected(已失败)。且这三种状态是不可逆的,只能由 pending 到 fulfilled,pending 到 rejected。resolve 使 promise 状态由 pending 到 fulfilled,reject 使 promise 状态由 pending 到 rejected。

const ps = new Promise(function () {});

 

const ps = new Promise(function (resolve, reject) {let number = 10;if (number >= 10) {resolve(number);} else {reject("number 小于10");}
});

 

2.2 实例方法

为了更好的控制下一步执行,又诞生了三个实例方法 then、catch、finally

2.2.1 then 方法

then 方法一般接受两个参数 resolve、reject。分别对应成功时的回调和失败时的回调。

成功状态的 promise 实例
const ps1 = new Promise(function (resolve, reject) {let number = 10;if (number >= 10) {resolve(number);} else {reject("number 小于10");}
});ps1.then(function (res) {console.log(res);
});

 

失败状态的 promise 实例
const ps2 = new Promise(function (resolve, reject) {let number = 9;if (number >= 10) {resolve(number);} else {reject("number 小于10");}
});ps2.then(function (res) {},function (err) {console.log(err);}
);

 

2.2.2 catch 方法

then 方法支持链式调用,then 的执行严重依赖上一步的结果,上一步如果没有结果,那么下一步就不会执行。但是每一步都写 reject 特别麻烦,所以诞生了 catch,then 就可以省略 reject 方法,reject 方法就交给 catch 执行,同时 catch 还可以捕获执行 resolve 的异常。

const ps2 = new Promise(function (resolve, reject) {let number = 9;if (number >= 10) {resolve(number);} else {reject("number 小于10");}
});ps2.then(function (res) {}).catch(function (err) {console.log(err);});

2.2.3 finally 方法

有的时候,无论成功还是失败都需要执行一些操作,就诞生了 finally。我们可以在这做一些清理工作。

const ps2 = new Promise(function (resolve, reject) {let number = 9;if (number >= 10) {resolve(number);} else {reject("number 小于10");}
});ps2.then(function (res) {}).catch(function (err) {console.log(err);}).finally(function () {console.log("end");});

 

2.2.4 then 的链式调用

因为 then 方法支持链式调用,所以我们需要知道使用 then 方法会有什么效果。只要调用 promise 实例的 then 方法一定产生一个新的 promise,这个 promise 的状态由里面的函数决定。函数什么时候有结果,这个新 promise 状态什么时候由 pending 转 fulfilled。catch 和 finally 同理。

const ps = new Promise(function (resolve, reject) {let number = 10;if (number >= 10) {resolve(number);} else {reject("number 小于10");}
});ps.then(function (res) {return res * 10;
}).then(function (res) {return res + 2;}).then(function (res) {if (res > 100) {console.log(res);} else {console.log("最后结果小于100");}});

 

3. Promise 原型方法

为了满足更多的业务需要,又诞生了 6 个原型方法 Promise.all()、Promise.allSettled()、Promise.any()、Promise.race()、Promise.reject()、Promise.resolve()。且都会返回一个确定状态的 Promsie 对象。

统一使用两个成功异步 ps1、ps2。两个失败异步 ps3、ps4。作为测试用例。如下:

const ps1 = new Promise(function (resolve, reject) {setTimeout(() => {resolve("成功结果1");}, 1000);
});const ps2 = new Promise(function (resolve, reject) {setTimeout(() => {resolve("成功结果2");}, 2000);
});const ps3 = new Promise(function (resolve, reject) {setTimeout(() => {reject("失败结果1");}, 3000);
});const ps4 = new Promise(function (resolve, reject) {setTimeout(() => {reject("失败结果2");}, 2000);
});

3.1 Promise.all()

通过数组的形式传入异步操作,所有的异步执行都成功,才执行成功,如果有一个失败了,就执行失败。例子如下:

都成功,执行 then 方法,成功返回结果,通过 res 以数组的方式返回

Promise.all([ps1, ps2]).then(function (res) {console.log("都成功", res);}).catch(function (err) {console.log(err);});

按传入顺序执行,如果有一个异步执行失败,中断其他异步操作,执行 catch 方法,通过 err 返回失败结果

Promise.all([ps1, ps2, ps3, ps4]).then(function (res) {console.log("都成功", res);}).catch(function (err) {console.log("执行失败", err);});

3.2 Promise.allSettled()

所有执行都有结果了就执行,无论成功还是失败

Promise.allSettled([ps1, ps2, ps3, ps4]).then(function (res) {console.log("都返回结果", res);
});

3.3 Promise.any()

任意异步成功了就执行

Promise.any([ps1, ps2, ps3, ps4]).then(function (res) {console.log("任意成功", res);
});

3.4 Promise.race()

任意异步成功或失败就执行。

Promise.race([ps1, ps2, ps3, ps4]).then(function (res) {console.log("任意成功或失败", res);
});

3.5 Promise.reject()

返回一个状态为 rejected 的 Promise 对象

3.6 Promise.resolve()

会接收 4 种类型的参数:promise 实例 、具有 then 方法的对象、没有 then 方法的对象、不传参

当参数是一个 Promise 实例时,直接返回这个实例。

Promise.resolve(ps1);

 当参数是一个具有 then 方法的对象时,将这个对象转为 Promise 对象,并立即执行对象的 then 方法

let obj = {name: "yqcoder",then(resolve) {resolve(this.name);},
};Promise.resolve(obj);

当参数是一个没有 then 方法的对象,或者参数不是对象时,就会返回状态为 fulfilled 的新的 Promise 对象,并将参数传入下一个 then。

let obj = {name: "yqcoder",
};let ps = Promise.resolve(obj);ps.then(function (res) {console.log("结果", res);
});

 

当不带任何参数时,就会返回一个状态为 fulfilled 的 Promise 对象

Promise.resolve();

 

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

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

相关文章

Windows下载安装RabbitMQ客户端(2024最新篇)

文章目录 RabbitMQ认知RabbitMQ下载RabbitMQ安装 更多相关内容可查看 RabbitMQ认知 定义:RabbitMQ是一个消息中间件,它接受并转发消息。你可以把它当做一个快递站点,当你要发送一个包裹时,你把你的包裹放到快递站,快递…

2024年土建施工员考试题库及答案

一、单选题 1.某工程项目桩基工程采用套管成孔灌注桩,为了保证施工质量,桩管灌满混凝土后开始拔管,按照规定,管内应保持不少于()m高的混凝土。 A.1 B.1.5 C.2 D.2.5 答案:C 解析&…

免费!GPT-4o发布,实时语音视频丝滑交互

We’re announcing GPT-4o, our new flagship model that can reason across audio, vision, and text in real time. 5月14日凌晨,OpenAI召开了春季发布会,发布会上公布了新一代旗舰型生成式人工智能大模型【GPT-4o】,并表示该模型对所有免费…

JDBC简介以及快速入门

这些都是JDBC提供的API 简介 每一个数据库的底层细节都不一样 不可能用一套代码操作所有数据库 我们通过JDBC可以操作所有的数据库 JDBC是一套接口 我们自己定义了实现类 定义实现类 然后就能用Java操作自己的数据库了 MySQL对于JDBC的实现类 就是驱动 快速入门 创建新的项…

MySQL-函数/约束

MySQL-函数 distinct-去重 //放在select后 1、字符串函数 SELECT 函数(参数) CONCAT(S1,S2,S3...)-字符串拼接,拼接成一个字符串。 LOWER(str)-将字符串str全部转换为小写。 UPPER(str)-将字符串str全部转换为大写。 LPAD(str,n,pad)-左填充,用字…

vscode copilot git commit 生成效果太差,用其他模型替换

问题 众所周知,copilot git commit 就像在随机生成 git commit 这种较为复杂的内容还是交给大模型做比较合适 方法 刚好,gitlens 最近开发了 AI commit的功能,其提供配置url api可以实现自定义模型 gitlens 只有3种模型可用&#xff1a…

【Python】在【数据挖掘】与【机器学习】中的应用:从基础到【AI大模型】

目录 💗一、Python在数据挖掘中的应用💕 💖1.1 数据预处理💞 💖1.2 特征工程💕 💗二、Python在机器学习中的应用💕 💖2.1 监督学习💞 💖2.2…

树二叉树

树 ​ 树是 n(n≥0)个结点的有限集。当 n 0时,称为空树。在任意一颗非空树中应满足: (1)有且仅有一个特定的称为根的结点。 (2)当 n > 1时,其余结点可分为 m&…

基于小波的多元信号降噪-基于马氏距离和EDF统计(MATLAB R2018a)

马氏距离是度量学习中一种常用的距离指标,通常被用作评定数据样本间的相似度,可以应对高维线性分布数据中各维度间非独立同分布的问题,计算方法如下。 (1)计算样本向量的平均值。 (2)计算样本向…

Golang:malformed module path “xxx“: missing dot in first path element

首先,这个问题往往是在golang中引入自己创建的包时发生的错误。解决方案如下 解决方案1: 检查被引入包下是否存在go.mod,因为你首先要保证你引入的是一个模块,而不只是一个文件夹,类似python包下init.py。因此,一个列子如下&…

Golang的协程调度器GMP

目录 GMP 含义 设计策略 全局队列 P的本地队列 GMP模型以及场景过程 场景一 场景2 场景三 场景四 场景五 场景六 GMP 含义 协程调度器,它包含了运行协程的资源,如果线程想运行协程,必须先获取P,P中还包含了可运行的G…

redis-benchmark 基准测试

我们可以通过 redis 自带工具 redis-benchmark 来对 redis 服务器进行性能测试。 我们可以通过简单的 redis-benchmark 命令直接对本地部署的 redis 进行性能测试,不用输入任何的参数。默认情况下,redis-benchmark 会向 redis 服务器使用 50 个并发连接…

零基础直接上手java跨平台桌面程序,使用javafx(二)可视化开发Scene Builder

我们只做实用的东西,不学习任何理论,如果你想学习理论,请去买几大本书,慢慢学去。 NetBeans有可视化工具,但是IntelliJ IDEA对于javafx,默认是没有可视化工具的。习惯用vs的朋友觉得,写界面还要是有一个布局…

永久免费的iPhone,iPad,Mac,iWatch锁屏,桌面壁纸样机生成器NO.105

使用这个壁纸样机生成器,生成iPhone,iPad,Mac,iWatch锁屏,桌面壁纸,展示你的壁纸作品,一眼就看出壁纸好不好看,适不适合 资源来源于网络,免费分享仅供学习和测试使用&am…

领域驱动设计:异常处理

一、异常的处理 异常处理是领域模型要考虑的一部分,原因在于模型的责任不可能无限大。在遇到自己处理能力之外的情况时,要采用异常机制报告错误,并将处理权转交。异常就是这样一种机制,某种程度上,它可以保证领域模型…

06-服务拆分-服务远程调用

06-服务拆分-服务远程调用 1.根据订单id查询订单功能 需求:根据订单id查询订单的同时,把订单所属的用户信息一起返回 2.远程调用方式分析: 1.注册RestTemplate ​ 在order-service的OrderApplication中注册RestTemplate 代码: @MapperScan("cn.itcast.order.ma…

Python 设计模式(结构型)

文章目录 代理模式场景示例 门面模式场景示例 桥接模式场景示例 适配器模式场景示例 外观模式对比门面模式场景示例 享元模式场景示例 装饰器模式场景示例 组合模式场景示例 代理模式 在Python中,代理模式是一种结构型设计模式,它允许你提供一个代理对象…

grok debugger 正则解析 网络安全设备日志

1、网络设备、安全设备不同品牌、不同型号的设备,日志格式都不一样,那针对这种情况,我们可以使用工具grok debugger进行日志格式解析,具体的网址为: 地址:https://grokdebug.herokuapp.com/ 也可以采用私有化部署&am…

使用Python去除PNG图片背景

要使用Python自动去除PNG图片的背景,你可以使用remove.bg的API,或者使用一些图像处理库如OpenCV和Pillow结合Mask R-CNN等深度学习模型。以下是一个使用Pillow库的简单示例: 安装所需库: pip install pillow numpy使用以下代码去…

归并排序的递归与非递归实现

递归实现 归并排序有点类似于二叉树的后序遍历,是一种基于分治思想的排序算法。具体过程如下: 但要注意,在归并时要额外开辟一个与原数组同等大小的空间用来存储每次归并排序后的值,然后再拷贝到原数组中。 代码实现&#xff1a…