Js的 Promise的 then catch 笔记240222

news2025/6/9 15:30:34

Js的 Promise的 then catch 笔记240222

在这里插入图片描述

基本用法

new Promise(f=>{
	setTimeout(ev=>{
		f("一秒后输出控制台");
	},1000);
}).then(f的参数=>{
	console.log(f的参数);
});
// 控制台输出: 一秒后输出控制台

上面代码中, f 的标准名叫做 resolve , 所以应该写成

new Promise(resolve=>{
	setTimeout(ev=>{
		resolve("一秒后输出控制台");
	},1000);
}).then(传入resolve的参数=>{
	console.log(传入resolve的参数);
});
// 控制台输出: 一秒后输出控制台

实际上Promise和then都可以有两个参数, resolve 和 reject

new Promise((resolve,reject)=>{
	setTimeout(ev=>{
		resolve("传入resolve的参数"); //执行了resolve就不会执行reject
		reject("传入reject的参数");   //执行了reject就不会执行resolve
	},1000);
}).then(传入resolve的参数=>{
	console.log(传入resolve的参数);
},      传入reject的参数=>{
	console.log(传入reject的参数);
});
// 控制台输出: 传入resolve的参数

虽然Promise中的resolve和reject都会执行,
但then参中的resolve和reject只会执行其中一个, 前面的执行了,后面就不执行了,
将resolve和reject调换位置测试

new Promise((resolve,reject)=>{
	setTimeout(ev=>{
		reject("传入reject的参数");   //执行了reject就不会执行resolve
		resolve("传入resolve的参数"); //执行了resolve就不会执行reject
	},2000);
}).then(传入resolve的参数=>{
	console.log(传入resolve的参数);
},      传入reject的参数=>{
	console.log(传入reject的参数);
});
// 控制台输出: 传入reject的参数

可以将resolve和reject分别写到try{}cattch(e){}中

new Promise((resolve,reject)=>{
	setTimeout(ev=>{
		try{
			resolve("传入resolve的参数"); //执行了resolve就不会执行reject
		}catch(e){
			reject("传入reject的参数");   //执行了reject就不会执行resolve
		}
	},1000);
}).then(传入resolve的参数=>{
	console.log(传入resolve的参数);
},      传入reject的参数=>{
	console.log(传入reject的参数);
});
// 控制台输出: 传入resolve的参数

这样正常执行resolve, 异常执行reject .
但如果在then块中抛异常了怎么办呢? 可以写到catch函数中, 注意是catch函数,不是trycatch块.
下面模拟then中抛异常

new Promise((resolve,reject)=>{
	setTimeout(ev=>{
		try{
			resolve("传入resolve的参数"); //执行了resolve就不会执行reject
		}catch(e){
			console.log(e);
			reject("传入reject的参数");   //执行了reject就不会执行resolve
		}
	},3000);
}).then(传入resolve的参数=>{
	console.log(传入resolve的参数); throw "then参1函数抛异常";
},      传入reject的参数=>{
	console.log(传入reject的参数);  throw "then参2函数抛异常";
}).catch(err=>{
	console.log(err);
});
// 控制台输出: 
传入resolve的参数
then参1函数抛异常

catch对then两个参数函数的异常都能捕捉,反正只会执行其中一个.

下面模拟在resolve前出现异常

new Promise((resolve,reject)=>{
	setTimeout(ev=>{
		try{
			throw "resolve之前出现了异常"
			resolve("传入resolve的参数"); //执行了resolve就不会执行reject
		}catch(e){
			console.log(e);
			reject("传入reject的参数");   //执行了reject就不会执行resolve
		}
	},4000);
}).then(传入resolve的参数=>{
	console.log(传入resolve的参数); throw "then参1函数抛异常";
},      传入reject的参数=>{
	console.log(传入reject的参数);  throw "then参2函数抛异常";
}).catch(err=>{
	console.log(err);
});
// 控制台输出: 
resolve之前出现了异常
传入reject的参数
then参2函数抛异常

可以在then中return返回新的Promise, 就可以再次调用then, 称为then的链式调用.

new Promise((resolve,reject)=>{
	setTimeout(ev=>{
		try{
			resolve("传入resolve的参数"); //执行了resolve就不会执行reject
		}catch(e){
			console.log(e);
			reject("传入reject的参数");   //执行了reject就不会执行resolve
		}
	},4500);
}).then(传入resolve的参数=>{
	console.log(传入resolve的参数); return new Promise(resolve2=>resolve2("传入resolve2的参数"))
},      传入reject的参数=>{
	console.log(传入reject的参数);  throw "then参2函数抛异常";
}).catch(err=>{
	console.log(err);
}).then(传入resolve2的参数=>{
	console.log(传入resolve2的参数);  throw "第二个then参1函数抛异常";
}).catch(err=>{
	console.log(err);
});
// 控制台输出: 
传入resolve的参数
传入resolve2的参数
第二个then参1函数抛异常
  • 可以 then().then().then()...
  • 也可以then().catch().then().catch().then().catch()...
then中 简写 new Promise

上面的 return new Promise(resolve2=>resolve2("传入resolve2的参数"))
可简写为 return Promise.resolve("传入resolve2的参数");
甚至可简写为 return "传入resolve2的参数";

then中的
return new Promise(resolve2=>resolve2("传入resolve2的参数"))
可简写为 
return Promise.resolve("传入resolve2的参数");
甚至可简写为 
return "传入resolve2的参数";

new Promise((resolve,reject)=>{
	setTimeout(ev=>{
		try{
			resolve("传入resolve的参数"); //执行了resolve就不会执行reject
		}catch(e){
			console.log(e);
			reject("传入reject的参数");   //执行了reject就不会执行resolve
		}
	},4500);
}).then(传入resolve的参数=>{
	console.log(传入resolve的参数); return new Promise(resolve2=>resolve2("传入resolve2的参数"))
},      传入reject的参数=>{
	console.log(传入reject的参数);  throw "then参2函数抛异常";
}).catch(err=>{
	console.log(err);
}).then(传入resolve2的参数=>{
	console.log(传入resolve2的参数);  throw "第二个then参1函数抛异常";
}).catch(err=>{
	console.log(err);
});



// then链式调用简写, then中的 new Promise 简写


new Promise((resolve,reject)=>{
	setTimeout(ev=>{
		try{
			resolve("传入resolve的参数"); //执行了resolve就不会执行reject
		}catch(e){
			console.log(e);
			reject("传入reject的参数");   //执行了reject就不会执行resolve
		}
	},4600);
}).then(传入resolve的参数=>{
	console.log(传入resolve的参数); return Promise.resolve("传入resolve2的参数");
},      传入reject的参数=>{
	console.log(传入reject的参数);  throw "then参2函数抛异常";
}).catch(err=>{
	console.log(err);
}).then(传入resolve2的参数=>{
	console.log(传入resolve2的参数);  throw "第二个then参1函数抛异常";
}).catch(err=>{
	console.log(err);
});


new Promise((resolve,reject)=>{
	setTimeout(ev=>{
		try{
			resolve("传入resolve的参数"); //执行了resolve就不会执行reject
		}catch(e){
			console.log(e);
			reject("传入reject的参数");   //执行了reject就不会执行resolve
		}
	},4700);
}).then(传入resolve的参数=>{
	console.log(传入resolve的参数); return "传入resolve2的参数";
},      传入reject的参数=>{
	console.log(传入reject的参数);  throw "then参2函数抛异常";
}).catch(err=>{
	console.log(err);
}).then(传入resolve2的参数=>{
	console.log(传入resolve2的参数);  throw "第二个then参1函数抛异常";
}).catch(err=>{
	console.log(err);
});




其它参考

Promise - JavaScript | MDN

Promise() 构造函数- JavaScript | MDN

使用Promise - JavaScript | MDN



Promise 是 JavaScript 中用于处理异步操作的对象，它代表了某个最终可能完成或失败的操作及其结果值的状态。Promise 可以帮助你组织和处理异步代码，使得它更加容易理解和维护。

Promise 有三种状态：

  1. Pending（等待中）：初始状态，既不是成功，也不是失败。
  2. Fulfilled（已实现）：意味着操作成功完成。
  3. Rejected（已拒绝）：意味着操作失败。

Promise 的基本用法如下：

  1. 创建一个新的 Promise 对象：
const promise = new Promise((resolve, reject) => {
  // 异步操作
  // 如果成功，调用 resolve() 并传入结果值
  // 如果失败，调用 reject() 并传入错误原因或 Error 对象
});

在上面的代码中，我们传递了一个函数给 Promise 构造函数，这个函数接收两个参数：resolve 和 reject，它们是两个函数，由 JavaScript 引擎提供，不需要自己部署。

  1. 使用 .then() 方法处理 Promise：

当 Promise 的状态变为 Fulfilled 时，会调用 .then() 方法中指定的回调函数，并传入 Promise 的结果值。你可以在这个回调函数中处理 Promise 成功完成后的逻辑。

promise.then(result => {
  console.log(result); // 处理 Promise 成功后的结果
});
  1. 使用 .catch() 方法处理 Promise：

当 Promise 的状态变为 Rejected 时，会调用 .catch() 方法中指定的回调函数，并传入 Promise 的错误原因。你可以在这个回调函数中处理 Promise 失败后的逻辑。

promise.catch(error => {
  console.error(error); // 处理 Promise 失败后的错误
});

另外，你还可以使用 .finally() 方法来处理无论 Promise 成功还是失败都需要执行的逻辑。这个方法在 Promise 状态改变后会被调用，无论状态是 Fulfilled 还是 Rejected。

下面是一个完整的 Promise 示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true; // 假设这是一个异步操作的结果
    if (success) {
      resolve('操作成功！'); // 当操作成功时，调用 resolve() 并传入结果值
    } else {
      reject('操作失败！'); // 当操作失败时，调用 reject() 并传入错误原因
    }
  }, 1000); // 模拟异步操作，延迟 1 秒后执行
});

promise
  .then(result => {
    console.log(result); // 输出：操作成功！
  })
  .catch(error => {
    console.error(error); // 如果操作失败，会输出：操作失败！
  })
  .finally(() => {
    console.log('Promise 已处理完毕。'); // 无论成功还是失败，都会输出这句话。
  });



JavaScript的Promise是一种用于处理异步操作的对象。它将异步操作的结果以同步的方式进行处理，使得代码更加清晰和易于维护。

  1. Promise的基本概念：

    • Promise是一个对象，它代表了一个异步操作的最终完成或失败的结果。
    • Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
    • Promise的状态一旦改变，就不会再变。

  2. Promise的基本用法：

    • 创建Promise对象：使用Promise构造函数来创建一个Promise对象，构造函数接受一个执行器函数作为参数。
    • 执行器函数：执行器函数接受两个参数，分别是resolve和reject。在异步操作完成时，调用resolve函数将Promise的状态改为fulfilled；在异步操作失败时，调用reject函数将Promise的状态改为rejected。
    • 处理Promise的结果：可以使用then方法来处理Promise的结果，then方法接受两个回调函数作为参数，分别是在Promise状态变为fulfilled时调用的回调函数和在Promise状态变为rejected时调用的回调函数。

  3. Promise的链式调用：

    • then方法可以返回一个新的Promise对象，使得多个异步操作可以按照顺序执行。
    • 可以通过在then方法中返回一个新的Promise对象来实现链式调用。
    • 可以使用catch方法来捕获Promise链中的错误。

下面是一个使用Promise的示例代码：

function getData() {
  return new Promise((resolve, reject) => {
    // 异步操作，例如发送Ajax请求
    setTimeout(() => {
      const data = '这是从服务器获取的数据';
      resolve(data);
    }, 2000);
  });
}

getData()
  .then((data) => {
    console.log('成功获取数据：', data);
    return data.toUpperCase();
  })
  .then((upperCaseData) => {
    console.log('转换为大写：', upperCaseData);
  })
  .catch((error) => {
    console.error('获取数据失败：', error);
  });

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

开发Chrome插件，background.js中log打印未出现在控制台

开发Chrome插件，background.js中log打印未出现在控制台

不同于内容脚本（通常命名content.js），在后台脚本（通常命名background.js或service-worker.js）中console.log并不会在控制台中直接显示。 要查看后台脚本上下文的正确控制台，执行如下步骤： 访问…
阅读更多...
【Python笔记-设计模式】原型模式

【Python笔记-设计模式】原型模式

一、说明 原型模式是一种创建型设计模式， 用于创建重复的对象，同时又能保证性能。 使一个原型实例指定了要创建的对象的种类，并且通过拷贝这个原型来创建新的对象。 (一) 解决问题 主要解决了对象的创建与复制过程中的性能问题。主要针对…
阅读更多...
有哪些适合程序员的副业？

有哪些适合程序员的副业？

如果你经常玩知乎、看公众号（软件、工具、互联网这几类的）你就会发现，好多资源连接都变成了夸克网盘、迅雷网盘的资源链接。 例如：天涯神贴，基本上全是夸克、UC、迅雷网盘的资源链接。 有资源的前提下，迅雷…
阅读更多...
QT_day4

QT_day4

1.思维导图 2. 输入闹钟时间格式是小时:分钟 widget.cpp #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);id startTimer(1000);flag1;speecher new QTextT…
阅读更多...
基础数据结构和算法《》

基础数据结构和算法《》

递归 1.递归应该一种比较常见的实现一些特殊代码逻辑时需要做的，但常常也是最绕的一种方式，在解释递归 之前，我们用循环和递归来做个比较1.1.如果你打开一扇门后，同样发现前方也有一扇们，紧接着你又打开下一扇门...直…
阅读更多...
应用回归分析：泊松回归

应用回归分析：泊松回归

泊松回归是一种广泛用于计数数据的回归分析方法。它适用于响应变量是非负整数的情况，特别是当这些计数呈现出明显的离散分布时。泊松回归通过泊松分布的概率分布函数来建模计数数据，使其成为处理计数数据的自然选择。本文将介绍泊松回归的基本概念、应用…
阅读更多...
石头剪刀布游戏（C语言）

石头剪刀布游戏（C语言）

题目描述 石头剪刀布游戏有 3 种出拳形状：石头、剪刀、布。分别用字母 A , B , C 表示。 游戏规则: 出拳形状之间的胜负规则如下： A > B；B > C；C > A；">"左边一个字母，表示相对优…
阅读更多...
进程线程通信-day6

进程线程通信-day6

1、将信号和消息队列的课堂代码敲一遍 //发送端 #include<myhead.h>//定义一个消息结构类型 struct msgbuf {long mtype;char mtext[1024]; }; //定义一个宏&#xff0c;表示消息正文大小 #define MSGSIZE sizeof(struct msgbuf)-sizeof(long)int main(int argc, const…
阅读更多...
PBM模型学习

PBM模型学习

本专栏着重讲解PBM学习所得&#xff0c;学习笔记、心得&#xff0c;并附有视频素材资料&#xff0c;视频详细目录如下&#xff1a; PBM相关参数解释1 PBM相关参数解释2 PBM相关案例实践1 PBM相关案例实践2 PBM相关案例实践2 PBM相关案例实践3 PBM多相流中次相界面设置1 PBM多相…
阅读更多...
Kotlin 进阶 学习 委托

Kotlin 进阶 学习 委托

1.接口委托 package com.jmj.jetpackcomposecompositionlocal.byStudy/*** 接口委托*/ interface HomeDao{fun getAllData():List<String> }interface ADao{fun getById(id:Int):String }class HomeDaoImpl:HomeDao{override fun getAllData(): List<String> {ret…
阅读更多...
MATLAB中的稀疏矩阵和密集矩阵

MATLAB中的稀疏矩阵和密集矩阵

在MATLAB中&#xff0c;矩阵可以表示为密集或稀疏格式。通常&#xff0c;矩阵默认以密集格式存储&#xff0c;这意味着每个元素都明确地存储在内存中&#xff0c;无论它的值是多少。然而&#xff0c;当矩阵含有大量的零元素时&#xff0c;这种存储方式就会变得非常低效。为了更…
阅读更多...
iOS整理 - 关于直播 - 搭建服务端

iOS整理 - 关于直播 - 搭建服务端

前言 其实本人一直都想自己简单做一套直播&#xff08;包括移动端和服务端&#xff09;的开发测试&#xff0c;但是之前一直做得比较迷茫。最近偶然间在来了灵感&#xff0c;瞬间解除了我很多疑惑。我会分享出来&#xff0c;希望大家一起研究下。稍后&#xff0c;我完整做好了…
阅读更多...
ZS Associates致盛咨询是什么公司？排名怎么样？

ZS Associates致盛咨询是什么公司？排名怎么样？

随着商业化时代的加速演进&#xff0c;咨询公司在企业发展中的“智囊团”角色愈发突显。对于医药企业来说&#xff0c;一个优秀的咨询团队不仅可以帮助推动整体战略转型及内部改革&#xff0c;还对药品研发、营销起到优化促进作用。 那什么样的咨询企业可称之为优秀的咨询企业…
阅读更多...
关于msvcr120.dll丢失怎样修复的详细解决步骤方法分享，msvcr120.dll文件的相关内容

关于msvcr120.dll丢失怎样修复的详细解决步骤方法分享，msvcr120.dll文件的相关内容

在电脑使用过程中&#xff0c;我们经常遇到各种系统错误&#xff0c;其中msvcr120.dll丢失是一个常见问题。msvcr120.dll文件是Visual C Redistributable for Visual Studio 2015/2017的一个组件&#xff0c;主要用于支持某些应用程序的正常运行。当电脑出现msvcr120.dll丢失情…
阅读更多...
SpringBoot项目启动报java.nio.charset.MalformedInputException Input length = 1解决方案

SpringBoot项目启动报java.nio.charset.MalformedInputException Input length = 1解决方案

报错详情 SpringBoot启动报错java.nio.charset.MalformedInputException: Input length 1 报错原因 出现这个的原因&#xff0c;就是解析yml文件时&#xff0c;中文字符集不是utf-8的原因&#xff0c;这是maven在项目编译时&#xff0c;默认字符集编码是GBK。 解决方式 检…
阅读更多...
多数pythoneer只知有列表list却不知道python也有array数组

多数pythoneer只知有列表list却不知道python也有array数组

数组和列表 Python中数组和列表是不同的&#xff0c;我敢断言大多数的pythoneer只知道有列表list&#xff0c;却不知道python也有array数组。列表是一个包含不同数据类型的元素集合&#xff0c;而数组是一个只能含相同数据类型的元素集合。 Python的array库是一个提供数组操作…
阅读更多...
ORA-02062: distributed recovery received DBID 9ad10df5, expected 38cc1cd5

ORA-02062: distributed recovery received DBID 9ad10df5, expected 38cc1cd5

今晚做重启维护&#xff0c;发现节点二上报错如下 Fri Feb 23 21:47:43 2024 Errors in file /u01/app/oracle/diag/rdbms/orcl/orcl2/trace/orcl2_reco_58540.trc: ORA-02062: distributed recovery received DBID 9ad10df5, expected 38cc1cd5 Errors in file /u01/app/oracl…
阅读更多...
DTV的LCN功能介绍

DTV的LCN功能介绍

文章目录 LCN简介LCN获取LCN Conflict LCN简介 Logical Channel Number&#xff08;LCN&#xff09;是数字电视系统中用于标识和组织频道的逻辑编号。LCN的目的是为了方便用户浏览和选择频道&#xff0c;使得数字电视接收设备能够根据这些逻辑编号对频道进行排序和显示。 LCN…
阅读更多...
基于事件触发机制的孤岛微电网二次电压与频率协同控制MATLAB仿真模型

基于事件触发机制的孤岛微电网二次电压与频率协同控制MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 本模型质量非常高&#xff0c;运行效果完美。本模型为4机并联孤岛系统&#xff0c;在下垂控制的基础上加入二次控制&#xff0c;二次电压与频率协同控制策略利用事件触发的方法来减少控制器的更新次数。该方法…
阅读更多...
exe4j将java项目打包为exe包（无需每台机器上安装jdk）

exe4j将java项目打包为exe包（无需每台机器上安装jdk）

这里写目录标题 背景过程打jar包1、修改pom文件2、maven命令打jar包 下载exe4j工具1.首先去官网下载 exe相关配置1、填写密钥2、选择jar包格式3、设置名称以及输出exe位置4、设置图标及设置操作系统版本5、设置要导入的jar包&#xff0c;以及启动类6、设置jdk版本范围7、设置jd…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023