前端 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是一个消息中间件,它接受并转发消息。你可以把它当做一个快递站点,当你要发送一个包裹时,你把你的包裹放到快递站,快递…

免费!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的实现类 就是驱动 快速入门 创建新的项…

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的协程调度器GMP

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

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

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

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

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

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

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

【十大排序算法】归并排序

归并排序,如同秋日落叶,分散而细碎, 然而风吹叶动,自然而有序, 彼此相遇,轻轻合拢, 最终成就,秩序之谧。 文章目录 一、归并排序二、发展历史三、处理流程四、算法实现五、算法特性…

树莓派4B_OpenCv学习笔记5:读取窗口鼠标状态坐标_TrackBar滑动条控件的使用

今日继续学习树莓派4B 4G:(Raspberry Pi,简称RPi或RasPi) 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1: 今日学习:读取窗口鼠标状态坐标_TrackBar滑动条控件的使…

redis 05 复制 ,哨兵

01.redis的复制功能,使用命令slaveof 2. 2.1 2.2 3. 3.1 3.1.1 3.1.2 3.1.3 4 4.1 4.2 例子 5.1 这里是从客户端发出的指令 5.2 套接字就是socket 这里是和redis事件相关的知识 5.3 ping一下

idea编码问题:需要 <标识符> 非法的类型 、需要为 class、interface 或 enum 问题解决

目录 问题现象 问题解决 问题现象 今天在idea 使用中遇到的一个编码的问题就是&#xff0c;出现了这个&#xff1a; Error:(357, 28) java: /home/luya...........anageService.java:357: 需要 <标识符> Error:(357, 41) java: /home/luya............anageService.ja…

Cinema 4D 2024 软件安装教程、附安装包下载

Cinema 4D 2024 Cinema 4D&#xff08;C4D&#xff09;是一款由Maxon开发的三维建模、动画和渲染软件&#xff0c;广泛用于电影制作、广告、游戏开发、视觉效果等领域。Cinema 4D允许用户创建复杂的三维模型&#xff0c;包括角色、场景、物体等。它提供了多种建模工具&#x…

Channels无法使用ASGI问题

Django Channels是一个基于Django的扩展, 用于处理WebSockets, 长轮询和触发器事件等实时应用程序. 它允许Django处理异步请求, 并提供了与其他WebSockets库集成的功能.当我们在Django Channels中使用ASGI_APPLICATION设置时, 我们可以指定一个新的ASGI应用程序来处理ASGI请求.…

数据库期末设计——图书管理系统

目录 1.前置软件以及开发环境&#xff1a; 2.开发过程讲解 代码环节&#xff1a; 数据库代码 1.BookDao.java 2.BookTypeDao.java 3.UserDao.java 4.Book.java 5.BookType.java 6.User.java 7.DbUtil.java 8.Stringutil.java 9.BookAddInterFrm.java 10.BookMan…

freertos中的链表1 - 链表的数据结构

1.概述 freertos中链表的实现在 list.c 和 list.h。旨在通过学习freertos中的链表的数据结构&#xff0c;对freertos中的链表实现有一个整体的认识。freertos使用了三个数据结构来描述链表&#xff0c;分别是&#xff1a;List_t&#xff0c; MiniListItem_t&#xff0c;ListIt…

产品创新:驱动企业增长的核心动力

在当今快速变化的市场环境中&#xff0c;产品创新已成为企业生存和发展的关键。产品创新不仅涉及全新产品或服务的开发&#xff0c;也包括对现有产品或服务的持续改进和优化。本文将深入探讨产品创新的定义、重要性以及如何通过创新驱动企业增长&#xff0c;并结合实际案例进行…