Js的 Promise的 then catch 笔记240222

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);
  });

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

函数栈帧的创建及销毁（超详解）

函数栈帧的创建及销毁（超详解）

目录 1.预备知识 1.1内存区的划分 1.2认识相关寄存器和汇编指令 1.2.1寄存器 1.2.2相关汇编指令 2.测试前 2.1测试代码及环境 2.2 main函数也是被其他函数调用的 3.函数栈帧的创建 4.进入函数内部 5.形参与实参 6.call/jump add函数 7.函数栈帧的销毁 7.1保存…
阅读更多...
使用python查看官网是否发布新的内容

使用python查看官网是否发布新的内容

目录 前言 第一章、python介绍和使用pip install下载包 1.python介绍 2.使用vscode编写python 3.pip install的使用 第二章、查看官网是否发布新的内容 第三章、代码实现 目录结构 代码实现 check_new_news.py files.py news.py main.py file.txt 运行演示 前言 也…
阅读更多...
【已解决】@tableid can‘t more than one

【已解决】@tableid can‘t more than one

实体里面不能有两个TableId，只留一个就好了
阅读更多...
SpringBoot对于SpringMVC的支持

SpringBoot对于SpringMVC的支持

创建项目 版本说明这里使用的 SpringBoot 2.0.0.Release SpringBoot对于SpringMVC的支持 在之前的开发中很多场景下使用的是基于xml配置文件或者是Java配置类的方式来进行SpringMVC的配置。一般来讲，初始的步骤如下所示 1、初始化SpringMVC的DispatcherServlet2、…
阅读更多...
[OpenAI]继ChatGPT后发布的Sora模型原理与体验通道

[OpenAI]继ChatGPT后发布的Sora模型原理与体验通道

前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家：https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言OpenAI体验通道Spacetime Latent Patches 潜变量时空碎片, 建构视觉语言系统…
阅读更多...
kettle计算增长率

kettle计算增长率

kettle计算增长率 问题描述处理方法 问题描述 读取一段时间内的数据记录，计算相邻记录的比率 iddatevalue12024-01-0110012024-01-0211012024-01-0312012024-01-0490 处理方法 1.使用统计中的分析查询节点能在每一行中添加前后行的数据 2.使用计算器节点计算比…
阅读更多...
音视频基础概念笔记

音视频基础概念笔记

RGB 色彩空间更适合图像采集和显示， YUV 空间用于编码和存储则比较好。 无论是 RGB 还是 YUV ，他们都是 表达 色彩信息的一种方式。 （Human Visual System）人类视觉系统 色度感知 包含两个维度：色调（Hue&…
阅读更多...
ELK入门(四)-logstash

ELK入门(四)-logstash

Logstash Logstash 是开源的服务器端数据处理管道，能够同时从多个来源采集数据，转换数据，然后将数据发送到您最喜欢的存储库中。 Logstash 能够动态地采集、转换和传输数据，不受格式或复杂度的影响。利用 Grok 从非结构化数据中…
阅读更多...
WebService学习，wsdl文件详解

WebService学习，wsdl文件详解

目录 第一章、起因1.1）学习原因1.2）提问的过程（逐步提出问题）1、？wsdl链接的含义，有什么作用？2、什么是wsdl文档？3、如何阅读wsdl文件？4、wsdl文件有什么作用&#xff1f…
阅读更多...
Linux编译器---gcc/g++使用详解

Linux编译器---gcc/g++使用详解

目录 前言 gcc/g介绍 gcc/g的编译指令（以gcc为例） ​编辑 gcc选项 预处理(进行宏替换) 编译（生成汇编） 汇编（生成机器可识别代码） 链接（生成可执行文件或库文件） 函数库 概念 …
阅读更多...
Vue单文件学习项目综合案例Demo，黑马vue教程

Vue单文件学习项目综合案例Demo，黑马vue教程

文章目录 前言一、小黑记事本二、购物车三、小黑记账清单 前言 bilibili视频地址 一、小黑记事本 效果图 主代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"/><meta http-equiv"X-UA-Compatible&…
阅读更多...
C# CAD2016 cass10宗地Xdata数据写入

C# CAD2016 cass10宗地Xdata数据写入

一、 查看cass10写入信息 C# Cad2016二次开发获取XData信息&#xff08;二&#xff09; 一共有81条数据 XData value: QHDM XData value: 121321 XData value: SOUTH XData value: 300000 XData value: 141121JC10720 XData value: 权利人 XData value: 0702 XData value: YB…
阅读更多...
卫星地面站监测系统仿真

卫星地面站监测系统仿真

当今世界&#xff0c;大国竞争日趋激烈&#xff0c;国际关系愈发紧张&#xff0c;信息与通信已经是当下高度信息化社会的“命脉”&#xff0c;信息只有经过有效且广泛地传播&#xff0c;才能成为一种有利用价值的资源&#xff0c;产生经济效益、推动社会发展。通信技术在发展的…
阅读更多...
【必备清单】开学运动好物清单，迎接新学期，打造健康体魄！

【必备清单】开学运动好物清单，迎接新学期，打造健康体魄！

随着新学期的开始&#xff0c;校园里的氛围渐渐热络起来。作为一名学生&#xff0c;除了学习之外&#xff0c;参与体育运动也是非常重要的。不仅可以锻炼身体&#xff0c;提高身体素质&#xff0c;还能增加社交机会&#xff0c;丰富学校生活。然而&#xff0c;想要成为一名校园…
阅读更多...
software framwork

software framwork

software framwork软件架构 软件架构&#xff0c;之前图没找到&#xff0c;随手画了一个啦&#xff0c;了解架构细分职能和工作任务&#xff1a; 下图&#xff0c;第一是客户端架构包项目&#xff0c;第二是服务端架构包项目 -----------------------------------------------…
阅读更多...
数字化转型解锁企业高效协作与管理优化的新篇章!

数字化转型解锁企业高效协作与管理优化的新篇章!

一、客户介绍 某服饰股份有限公司是一家集服装设计、生产、销售及品牌建设于一体的企业。该公司的产品线涵盖男装、女装、童装等多个领域&#xff0c;设计风格时尚、简约、大方&#xff0c;深受消费者喜爱。公司注重产品研发&#xff0c;不断推陈出新&#xff0c;紧跟时尚潮流…
阅读更多...
洗选中心智能化运维工是做什么的？智能化运维工程师是干什么的

洗选中心智能化运维工是做什么的？智能化运维工程师是干什么的

洗选中心智能化运维工程师的职责和工作内容&#xff1f;同时&#xff0c;描述智能化运维工程师在信息技术行业中的具体角色和他们的主要任务。　　洗选中心智能运维工程师的职责和工作内容主要包括&#xff1a;　　设备监控管理&#xff1a;重点对洗涤中心机器进行实时监控管理…
阅读更多...
C#与VisionPro联合开发——INI存储和CSV存储

C#与VisionPro联合开发——INI存储和CSV存储

1、INI存储 INI 文件是一种简单的文本文件格式&#xff0c;通常用于在 Windows 环境中存储配置数据。INI 文件格式由一系列节&#xff08;section&#xff09;和键值对&#xff08;key-value pairs&#xff09;组成&#xff0c;用于表示应用程序的配置信息。一个典型的 INI 文…
阅读更多...
面试官：你知道Comparable 和 Comparator 的区别吗？我：巴拉巴拉

面试官：你知道Comparable 和 Comparator 的区别吗？我：巴拉巴拉

写在开头 面试官&#xff1a;“我们在Java的集合和数据结构中都离不开比较器&#xff0c;请你聊一聊Comparable 和 Comparator 这两种的区别吧” 内心活动&#xff1a;“上来就这么直接吗&#xff0c;那些ArrayList&#xff0c;HashMap都不问呀&#xff0c;好&#xff0c;既然…
阅读更多...
船舶制造5G智能工厂数字孪生可视化平台，推进船舶行业数字化转型

船舶制造5G智能工厂数字孪生可视化平台，推进船舶行业数字化转型

船舶制造5G智能工厂数字孪生可视化平台&#xff0c;推进船舶行业数字化转型。随着数字化时代的到来&#xff0c;船舶行业正面临着前所未有的机遇与挑战。为了适应这一变革&#xff0c;船舶制造企业需要加快数字化转型的步伐&#xff0c;提高生产效率、降低成本并增强市场竞争力…
阅读更多...
最新文章

Copyright @ 2022~2023