ES6标准-Promise对象

目录

Promise对象的含义

Promise对象的特点

Promise对象的缺点

Promise对象的基本用法

Promise对象的简单例子

Promise新建后就会立即执行

Promise对象回调函数的参数

Promise参数不会中断运行

Promise对象的then方法

Promise对象的catch()方法

Promise状态为resolved再抛出错误是无效的

Promise使用catch()的链式写法

Promise的catch()中也有错误

Promise会吃掉错误

Promise的finally()方法

Promise对象的含义

Promise是异步编程的一种解决方案,比传统解决方案(回调函数事件)---更合理和强大

Promise简单说就是一个容器,里面保存着某个未来才会结束的事件结果

Promise对象的特点

  • Promise对象的状态不受外界影响Promise对象代表一个异步操作,有三种状态:pending(进行中)fulfilled(已成功)rejected(已失败),只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态
  • 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:“pending变为fulfilled”和“pending变为rejected”。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为“resolved(已定型)

Promise对象的缺点

  • Promise对象一旦创建,它就会立即执行,无法中途取消
  • 如果不为Promise对象设置回调函数,Promise对象内部抛出的错误,不会传递到外部
  • 当处于pending状态时,无法得知目前进展到哪个阶段(刚刚开始还是即将完成)

Promise对象的基本用法

ES6规定,Promise对象是一个构造函数,用来生成Promise实例

下面代码是一个Promise示例:

const promise = new Promise((resolve,reject) => {//...some codeif(/* 异步操作成功 */){resolve(value);}else {reject(error)}
});

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolvereject

它们是两个函数

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

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数

promise.then((value) => {//success
},(error) => {//error
})

then方法可以接收两个回调函数作为参数,第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用

第二个函数是可选的,并不一定要提供,两个函数都接收Promise对象传出的值作为参数

Promise对象的简单例子

function timeout(ms){return new Promise((resolve,reject) => {setTimeout(resolve,ms,'done');})
}
timeout(100).then((value) => {console.log("value值是:",value);
})

效果:

Promise新建后就会立即执行

let promise = new Promise((resolve,reject) => {console.log("Promise正在进行");resolve();
});promise.then(() => {console.log("promise 成功执行完毕")
})console.log('间隔符')

上面代码中:

promise对象首先被创建,这个时候Promise已经开始执行

随后,我们调用promise.thn()回调函数,这是一个异步操作,它在等待Promise执行完毕

最后,我们打印出一条“间隔符”的消息,用来演示异步操作的滞后性

效果

Promise对象回调函数的参数

Promise对象中,如果调用resolve函数和reject函数,那么它们的参数会被传递给回调函数

reject函数的参数通常是Error对象的实例,表示跑出的错误

resolve函数的参数除了正常的值以外,还可能是另一个Promise实例,如下面代码所示:

const p1 = new Promise((resolve, reject) => {//...
})
const p2 = new Promise((resolve, reject) => {//...resoleve(p1);
})

p2resolve方法将p1作为参数,即一个异步操作的结果是返回另一个异步操作

注意:“这时p1的状态决定了p2的状态,如果p1是pending,那么p2的回调函数就会等待p1的状态改变,如果p1是resolved或者rejected,那么p2的回调函数会立即执行

再来看一个例子

const p1 = new Promise((resolve,reject) => {setTimeout(() => {reject(new Error('error'))},3000);
})
const p2 = new Promise((resolve,reject) => {setTimeout(() => {resolve(p1)},1000)
})p2.then((res) => {console.log(res)
}).catch((err) => {console.log(err)
})

效果

  • 上面代码中,p2的状态依赖于p1的状态,因为p2返回p1,所以p2自身的状态无效了
  • 又因为p2是一个显式抛出错误的语句,所以then()回调无效,被catch()回调捕获

Promise参数不会中断运行

new Promise((resolve,reject) => {resolve(1);console.log(2);
}).then((res) => {console.log(res);
})

效果

上面代码中,调用resolve()函数以后,后面的console.log()依然会执行,并且会首先打印出来

作者是因此resolve()函数会在Promise语句执行完最后一条语句后再执行

一般来说,调用resolvereject以后,Promise的使命就完成了,后续操作应该放到then方法里面,而不应该直接卸载resolvereject后面,所以最好在它们前面加上return语句

new Promise((resolve,reject) => {return resolve(1);console.log("我不会被打印");
})

Promise对象的then方法

Promise实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的

它的作用是为了Promise实例添加状态改变时的回调函数

then方法的第一个参数是resolved状态的回调函数,第二个参数是rejected状态的回调函数

then方法返回的是一个新的Promise实例(不是原先那个Promise实例),因此可以采用链式写法,即then方法后面再调用另一个then方法

new Promise((resolve,reject) => {//some code
}).then((res) => {console.log(res)
}).then((res1) => {console.log(res1)
});
  • 上面代码使用then方法,依次指定了两个回调函数
  • 第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数

采用链式的then,可以指定一组按照次序调用的回调函数。

这时,前一个回调函数,有可能返回的还是一个Promise对象,这时后一个回调函数,就会等待Promise对象的状态发生变化,才会被调用

new Promise((resolve,reject) => {resolve(1)
}).then((res) => {console.log(res)return res
}).then((res1) => {console.log(res1)
});

效果

注意:“每次调用then()方法时,都会返回一个不一样的Promise对象,新Promise对象的状态取决于then()方法执行结果

Promise对象的catch()方法

Promise.prototype.catch()方法是.then(null,rejection).then(undefined,rejection)的别名,用于指定发生错误时回调函数

new Promise((resolve,reject) => {//some code
}).then((res) => {console.log(res);
}).catch((err) => {console.log(err);   //捕获New promise和.then()中的错误
});

上面代码中,如果Promise状态为resolved会执行then()方法,如果是rejected或者.then()抛出错误,都会被catch()方法捕获

const promise = new Promise((resolve,reject) => {throw new Error('test');
});promise.catch((err) => {console.log(err);
});

效果

Promise状态为resolved再抛出错误是无效的

const promise = new Promise((resolve,reject) => {resolve('success');throw new Error('error');
})promise.then(result => {console.log(result);
});promise.catch(error => {    console.log(error);
});

效果

可以看到,promise对象在变为resolved状态后,再抛出错误,也不会被catch()捕获

注意:“Promise的状态一旦改变,就永久保持该状态,不会再变了

Promise使用catch()的链式写法

const test = () => {return new Promise((resolve,reject) => {//下面一行会报错,x是未定义的变量resolve(x + 2);})
}test().catch((err) => {console.log("promise 错误:",err);
}).then((res) => {console.log("我是catch()返回Promise对象的then");
})

效果

  • 上面代码运行完catch()方法指定的回调函数,会接着运行后面那个then()方法指定的回调函数,如果没有报错,则会跳过catch()方法
const test = () => {return new Promise((resolve,reject) => {resolve("没有错误");})
}test().catch((err) => {console.log("promise 错误:",err);
}).then((res) => {console.log("我是catch()返回Promise对象的then");
})

效果

因为上面代码没有报错,跳过了catch()方法,直接执行后面的then()方法

此时要是then()方法里面报错,就与前面的catch()无关了

Promise的catch()中也有错误

const test = () => {return new Promise((resolve,reject) => {//下面一行会报错,x是未定义的变量resolve(x + 2);})
}test().catch((err) => {console.log("我是test()的错误",err);resolve(y + 2);
}).catch((err) => {console.log("我是catch()的错误",err);
})    

效果

可以看到,在catch()中出现错误,需要后面再添加一个catch()用来捕获第一个catch()出现的错误,如果不再添加一个catch(),那么第一个catch()的错误将不会被捕获

注意:“在catch()和then()中的错误,会传递到代码外部!!!!

const test = () => {return new Promise((resolve,reject) => {//下面一行会报错,x是未定义的变量resolve(x + 2);})
}test().catch((err) => {console.log("我是test()的错误",err);y + 2;
})
console.log("我是全局的console.log");

效果

Promise会吃掉错误

如果没有使用catch()方法指定错误处理函数,Promise对象抛出的错误不会传递到外部代码,即不会有任何反应

const test = () => {return new Promise((resolve,reject) => {//下面一行会报错,x是未定义的变量resolve(x + 2);})
}console.log("我正常打印,没有反应");

效果

可以看到,此时没有任何错误信息

这表明Promise内部的错误不会影响到Promise外部的代码

Promise的finally()方法

finally()方法用于指定不管Promise对象最后状态如何,都会执行的操作

promise.then(()=>{...}).catch(()=>{...}).finally(()=>{...})

上面代码中,不管promise最后的状态如何,在执行外thencatch指定的回调函数以后,都会执行finally方法指定的回调函数

  • finally方法的回调函数不接受任何参数,这意味着没有办法知道,前面的Promise状态到底是resolved还是rejected

finally本质上是then()方法的特例:

promise
.finally(() => {// 语句
});
// 等同于
promise
.then(result => {// 语句return result;},error => {// 语句throw error;}
);

上面代码中,如果不使用finally方法,同样的语句需要为成功失败两种情况各写一次

有了finally方法,则只需要写一次

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

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

相关文章

WSL 2 中 FastReport 与 FastCube 的设置方法与优化策略

软件开发人员长期以来一直在思考这个问题:“我们如何才能直接在 Windows 中运行 Linux 应用程序,而无需使用单独的虚拟机?” WSL 技术为这个问题提供了一个可能的答案。WSL 的历史始于 2016 年。当时,其实现涉及使用 Windows 内核…

Golang | Leetcode Golang题解之第556题下一个更大元素III

题目&#xff1a; 题解&#xff1a; func nextGreaterElement(n int) int {x, cnt : n, 1for ; x > 10 && x/10%10 > x%10; x / 10 {cnt}x / 10if x 0 {return -1}targetDigit : x % 10x2, cnt2 : n, 0for ; x2%10 < targetDigit; x2 / 10 {cnt2}x x2%10 -…

【EFK】Linux集群部署Elasticsearch最新版本8.x

【EFK】Linux集群部署Elasticsearch最新版本8.x 摘要环境准备环境信息系统初始化启动先决条件 下载&安装修改elasticsearch.yml控制台启动Linux服务启动访问验证查看集群信息查看es健康状态查看集群节点查询集群状态 生成service token验证service tokenIK分词器下载 Elast…

关于性能测试:数据库的 SQL 性能优化实战

在性能测试中&#xff0c;SQL性能优化往往是最具挑战性的任务之一。数据库作为系统的核心数据处理单元&#xff0c;其性能直接影响整体系统的响应速度。当面对复杂的业务需求和庞大的数据量时&#xff0c;如何高效执行SQL语句&#xff0c;减少查询耗时&#xff1f;今天&#xf…

力扣-每日温度

. - 力扣&#xff08;LeetCode&#xff09; 这是我的第一个思路 虽然可以得到正确答案 但是过于暴力 已经超出了时间限制 class Solution { public:vector<int> dailyTemperatures(vector<int>& temperatures) {vector<int>ans;for (int i 0; i <…

1. ArkTS起步

ArkTS是HarmonyOS的主力应用开发语言&#xff0c;基于TypeScript扩展&#xff0c;强化了静态检查和分析&#xff0c;旨在提升程序稳定性和性能。它采用静态类型&#xff0c;禁止运行时改变对象布局&#xff0c;并对UI开发框架能力进行扩展&#xff0c;支持声明式UI描述和自定义…

Vue3 -- 项目配置之stylelint【企业级项目配置保姆级教程3】

stylelint为css的lint工具。可格式化css代码&#xff0c;检查css语法错误与不合理的写法&#xff0c;指定css书写顺序等。 配置stylelint&#xff1a; 我们项目使用scss作为预处理器 安装依赖&#xff1a; pnpm add sass sass-loader stylelint postcss postcss-scss postc…

androidstudio下载gradle慢

1&#xff0c;现象&#xff1a; 2&#xff0c;原因&#xff0c;国内到国外网址慢 3&#xff0c;解决方法&#xff1a;更改gradle-wrapper.properties #Wed Sep 26 20:01:52 CST 2018 distributionBaseGRADLE_USER_HOME distributionPathwrapper/dists zipStoreBaseGRADLE_USER…

golang分布式缓存项目 Day4 一致性哈希

注&#xff1a;该项目原作者&#xff1a;https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习 为什么使用一致性哈希 我该访问谁 对于分布式缓存来说&#xff0c;当一个节点接收到请求&#xff0c;如…

计算机网络:运输层 —— 运输层端口号

文章目录 运输层端口号的分类端口号与应用程序的关联应用举例发送方的复用和接收方的分用 运输层端口号的分类 端口号只具有本地意义&#xff0c;即端口号只是为了标识本计算机网络协议栈应用层中的各应用进程。在因特网中不同计算机中的相同端口号是没有关系的&#xff0c;即…

STM32H503开发(1)----开发板测试

STM32H503开发----1.开发板测试 概述硬件准备视频教学样品申请源码下载产品特性参考程序生成STM32CUBEMX串口配置LED配置堆栈设置串口重定向主循环演示 概述 STM32H503 & SENSOR是一款基于STM32H5系列微控制器的评估套件。该微控制器采用了40nm工艺制造&#xff0c;具有更…

#Swift Automatic Initializer Inheritance

在Swift中&#xff0c;**自动初始化器继承&#xff08;Automatic Initializer Inheritance&#xff09;**是一种机制&#xff0c;用于简化类的初始化器继承规则。它决定了在什么条件下子类可以自动继承父类的初始化器&#xff0c;而无需手动实现或重写。自动继承初始化器的机制…

Nacos黑马笔记

1. Nacos安装&#xff08;黑马教程安装材料&#xff09; 1.1 Windows安装 开发阶段采用单机安装即可。 1.1.1 下载安装包 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好的Nacos服务端或者源代码&#xff1a; GitHub主页&#xff1a;https://gith…

通过投毒Bingbot索引挖掘必应中的存储型XSS

简介 在本文中&#xff0c;我将讨论如何通过从外部网站对Bingbot进行投毒&#xff0c;来在Bing.com上实现持久性XSS攻击。 什么是存储型或持久性XSS&#xff1f;存储型攻击指的是将恶意脚本永久存储在目标服务器上&#xff0c;例如数据库、论坛、访问日志、评论栏等。受害者在…

【Pikachu】File Inclusion文件包含实战

永远也不要忘记能够笑的坚强&#xff0c;就算受伤&#xff0c;我也从不彷徨。 1.File Inclusion(文件包含漏洞)概述 File Inclusion(文件包含漏洞)概述 文件包含&#xff0c;是一个功能。在各种开发语言中都提供了内置的文件包含函数&#xff0c;其可以使开发人员在一个代码…

Stored procedures in PostgreSQL

select 存储过程&#xff0c;在现了解的情况&#xff0c;还是没有mysql,sqlserver等好写好用。 --postgreSQL 11.0 以下版本 create or replace FUNCTION procInsertSchool (pSchoolId Char(5),pSchoolName VarChar(100),pSchoolTelNo VarChar(8) ) RETURNS void language plp…

Java:JVM

1.JVM内存区域的划分 一个Java写的程序跑起来,就得到了一个Java进程 JVM 上面运行的字节码指令; 进程:操作系统资源分配的基本单位; 内存区域的划分: 1.程序计数器 在内存空间里(比较小的空间),保存了下一个要执行的指令的内存地址(元数据区的地址); 这里的"下一条…

Overleaf数学符号乱码等问题

Overleaf使用XeLatex编译时&#xff0c;公式中数学符号非法显示&#xff0c;如下图&#xff0c;属于∈符号显示错误&#xff1a; 原因&#xff1a;一般是文内中文引起的&#xff0c;警惕是否有中文标点等。 XeLatex编译图片标题是中文 原因&#xff1a;用了UTF-8编码&#x…

【MySQL 保姆级教学】事务的隔离级别(详细)--下(13)

事务的隔离级别 1. 如何理解事务的隔离性2. 事务隔离级别的分类3. 查看和设置事务隔离级别3.1 全局和会话隔离级别3.2 查看和设置隔离级别 4. 事务隔离级别的演示4.1 读未提交&#xff08;Read Uncommitted&#xff09;4.2 读已提交&#xff08;Read Committed&#xff09;4.3 …

响应式网页设计--html

一&#xff0c;HTML 文档的基本结构 一个典型的 HTML 文档包含了几个主要部分&#xff0c;基本结构如下(本文以下出现的所有代码都可以套入下面示例进行测试)&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8&q…