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.rhkb.cn/news/473338.html

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

相关文章

【目标检测】【Ultralytics-YOLO系列】Windows11下YOLOV5人脸目标检测

【目标检测】【Ultralytics-YOLO系列】Windows11下YOLOV5人脸目标检测 文章目录 【目标检测】【Ultralytics-YOLO系列】Windows11下YOLOV5人脸目标检测前言YOLOV5模型运行环境搭建YOLOV5模型运行数据集准备YOLOV5运行模型训练模型验证模型推理 总结 前言 Ultralytics YOLO 是一…

使用Axios函数库进行网络请求的使用指南

目录 前言1. 什么是Axios2. Axios的引入方式2.1 通过CDN直接引入2.2 在模块化项目中引入 3. 使用Axios发送请求3.1 GET请求3.2 POST请求 4. Axios请求方式别名5. 使用Axios创建实例5.1 创建Axios实例5.2 使用实例发送请求 6. 使用async/await简化异步请求6.1 获取所有文章数据6…

windows工具 -- 使用rustdesk和云服务器自建远程桌面服务, 手机, PC, Mac, Linux远程桌面 (简洁明了)

目的 向日葵最先放弃了, todesk某些功能需要收费, 不想用了想要 自己搭建远程桌面 自己使用希望可以电脑 控制手机分辨率高一些 原理理解 ubuntu云服务器配置 够买好自己的云服务器, 安装 Ubuntu操作系统 点击下载 hbbr 和 hbbs 两个 deb文件: https://github.com/rustdesk/…

MySQL-关联查询和子查询

目录 一、笛卡尔积 二、表连接 1、内部连接 1.1 等值连接 1.2 非等值连接 2、外部链接 2.1 左外连接-LEFT JOIN 2.2 右外连接-RIGHT JOIN 2.3 全关联-FULL JOIN/UNION 三、子查询 1、嵌套子查询 2、相关子查询 3、insert和select语句添加数据 4、update和select语…

AWTK-WIDGET-WEB-VIEW 实现笔记 (1) - 难点

webview 提供了一个跨平台的 webview 库,其接口简单,提供的例子也直观易懂。但是把它集成到 AWTK 里,还是遇到一些难题,这里记录一下,供有需要的朋友参考。 1. 作为 AWTK 控件 webview 提供的例子都是独立的程序&…

类与对象;

目录 一、认识类; 1、类的引入; 2、类的定义; 类的两种定义方式: 3、类的访问限定符及封装; 4、类的作用域; 5、类的实例化; 6、类对象模型; 计算类对象的大小; …

Ubuntu22.04LTS 部署前后端分离项目

一、安装mysql8.0 1. 安装mysql8.0 # 更新安装包管理工具 sudo apt-get update # 安装 mysql数据库,过程中的选项选择 y sudo apt-get install mysql-server # 启动mysql命令如下 (停止mysql的命令为:sudo service mysql stop&#xff0…

使用 Ant Design Vue 自定渲染函数customRender实现单元格合并功能rowSpan

使用 Ant Design Vue 自定渲染函数customRender实现单元格合并功能rowSpan 背景 在使用Ant Design Vue 开发数据表格时,我们常常会遇到需要合并单元格的需求。 比如,某些字段的值可能会在多行中重复出现,而我们希望将这些重复的单元格合并为…

27.<Spring博客系统③(实现用户退出登录接口+发布博客+删除/编辑博客)>

PS:关于打印日志 1.建议在关键节点打印日志。 ①请求入口。 ②结果响应 2.在可能发生错误的节点打印日志 3.日志不是越多越好。因为打日志也会消耗性能。 日志也可以配置去除重复日志。 一、用户退出功能 判断用户退出。我们只需要在前端将token删掉就可以了。 由于…

[前端面试]javascript

js数据类型 简单数据类型 null undefined string number boolean bigint 任意精度的大整数 symbol 创建唯一且不变的值,常用来表示对象属性的唯一标识 复杂数据类型 object,数组,函数,正则,日期等 区别 存储区别 简单数据类型因为其大小固定…

uniapp自动注册机制:easycom

传统 Vue 项目中,我们需要注册、导入组件之后才能使用组件。 uniapp 框架提供了一种组件自动注册机制,只要你在 components 文件夹下新建的组件满足 /components/组件名/组件名.vue 的命名规范,就能直接使用。 注意:组件的文件夹…

人工智能与SEO优化中的关键词策略解析

内容概要 在当今数字化快速发展的时代,人工智能(AI)与搜索引擎优化(SEO)的结合正变得愈发重要。关键词策略是SEO优化的一项基础工作,它直接影响到网站的可见性和流量。通过运用智能算法,企业能…

【异常解决】Linux shell报错:-bash: [: ==: 期待一元表达式 解决方法

博主介绍:✌全网粉丝21W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…

卷径计算(基于卷径变化微分方程计算实时卷径)

这里本质是积分法计算实时卷径,PLC里如何实现数值积分器算法请参考下面文章链接: 博途PLC数值积分器(矩形积分和梯形积分法自由切换) 博途PLC数值积分器(矩形梯形积分自由切换)_博图 积分计算-CSDN博客文章浏览阅读505次。本文详细介绍了博途PLC的数值积分器功能,涵盖了矩…

【Mysql】Mysql的多表查询---多表联合查询(上)

1、介绍 多表查询就是同时查询两个或者两个以上的表,因为有的时候,用户在查看数据的时候,需要显示的数据来自多张表,多表查询有以下分类: (1)交叉连接查询(产生笛卡尔积&#xff0…

Shell基础(4)

声明! 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团…

跨平台WPF框架Avalonia教程 十五

ListBox 列表框 列表框从元素源集合中显示多行元素,并允许选择单个或多个。 列表中的元素可以组合、绑定和模板化。 列表的高度会扩展以适应所有元素,除非特别设置(使用高度属性),或由容器控件设置,例如…

有序数组的平方(leetcode 977)

一个数组&#xff0c;返回一个所有元素的平方之后依然是一个有序数组。&#xff08;数组中含负数&#xff09; 解法一&#xff1a;暴力解法 所有元素平方后再使用快速排序法重新排序&#xff0c;时间复杂度为O(nlogn)。 class Solution { public:vector<int> sortedSqu…

使用 Go 实现将任何网页转化为 PDF

在许多应用场景中&#xff0c;可能需要将网页内容转化为 PDF 格式&#xff0c;比如保存网页内容、生成报告、或者创建网站截图。使用 Go 编程语言&#xff0c;结合一些现有的库&#xff0c;可以非常方便地实现这一功能。本文将带你一步一步地介绍如何使用 Go 语言将任何网页转换…

ASP.NET 部署到IIS,访问其它服务器的共享文件 密码设定

asp.net 修改上面的 IIS需要在 配置文件 添加如下内容 》》》web.config <system.web><!--<identity impersonate"true"/>--><identity impersonate"true" userName"您的账号" password"您的密码" /><co…