Js的 Promise的 then catch 笔记240222

于 2024-02-22 11:16:49 发布
阅读量745 收藏 10
点赞数 27
分类专栏： # Js JavaScript ECMAScript HTML CSS JS 文章标签： javascript 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kfepiza/article/details/136223972
版权

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);
  });
kfepiza
关注
  • 27
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端JavaScript基础训练系列一百七十二：then(..) 和 catch(..)
m0_68635815的博客
02-01 1448
每个 Promise 实例(不是 Promise API 命名空间)都有 then(…) 和 catch(…) 方法，通过 这两个方法可以为这个 Promise 注册完成和拒绝处理函数。Promise 决议之后，立即会调用 这两个处理函数之一，但不会两个都调用，而且总是异步调用。then(…) 接受一个或两个参数:第一个用于完成回调，第二个用于拒绝回调。如果两者中 的任何一个被省略或者作为非函数值传入的话，就会替换为相应的默认回调。
JavaScript中，then...catch结构
HWL5679的博客
02-02 1016
在JavaScript中，then...catch结构用于处理Promise对象的错误。
JS：Promise总结及关于then和catch的面试题解析
KongKong_Rac的博客
08-23 2888
Promise定义 Promise：一个对象，是异步操作的一种处理方案，主要解决了回调地狱callback hell问题。 Promise将处理程序与异步操作的最终成功值或失败原因关联起来，让异步方法像同步方法一样返回值，但不是立即返回最终值，异步方法返回一个Promise，在将来的某个时候提供该值。 Promise对象有三种状态： pending：进行中 resolved：完成 rejected：失败 Promise只有两种状态变化：（创建Promise时，PromiseStatus将处于pend
【JavaScript 基础】-- Promise中的then、catch、finally总结
野生松
05-21 3万+
总结： 1、Promise的状态一经改变就不能再改变。 const promise = new Promise((resolve, reject) => { resolve("success1"); reject("error"); resolve("success2"); }); promise .then(res => { console.log("then: ", res); }).catch(err => { console.log("catc
JavaScript系列之Promise的resolve、reject、then、catch
老__L的博客
09-28 3451
Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8)，但是她们是基于Promise的），从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。Promise 构造器主要用于包装不支持 Promise（返回值不是 Promise）的函数。then() 方法返回一个 Promise。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。catch() 方法返回一个Promise ，并且处理拒绝的情况。
js代码-Promise 笔记
07-16
文件main.js可能是实现Promise的示例代码，而README.txt通常包含对项目或笔记的简要说明。通过阅读这些文件，你可以更深入地理解Promise的工作原理和使用方式。 总结来说，Promise是JavaScript异步编程的核心，它...
promise详解，手动实现以及上万字笔记.rar
08-16
本资源包含了一份手动实现Promise的源码（Promise.js）和一份详细的Promise详解笔记（文档.md）。以下是Promise的基础知识及深入解析： 1. **Promise状态**： - `pending`：初始状态，既没有完成也没有被拒绝。 -...
我的Promise笔记整理
01-12
### 我的Promise笔记整理 #### 一、为什么使用Promise 在JavaScript中，异步编程是一种常见的编程模式，用于处理耗时的操作，如网络请求、文件读写等。传统的异步编程模型通常采用回调函数的方式，例如，在进行一...
Promise_html_js_typescript_Promise_
10-01
catch是then的语法糖，用于捕获前一个Promise中未处理的错误。它相当于在then后面添加了一个只处理错误的then。 5. **finally方法** finally方法在Promise无论成功还是失败都会执行，通常用于清理工作，如关闭...
js中try catch 和 then catch 的区别
最新发布
HWL5679的博客
02-02 781
try...catch是用来处理运行时错误的，Promise的then...catch是用来处理异步操作的错误的。
《ES6标准入门》（六）之Promise对象2——then()和catch()方法
热门推荐
眼里长着太阳，笑里全是坦荡
07-07 10万+
1.Promise.prototype.then()方法Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。then方法返回的是一个新的Promise实例（注意，不是...
ES6 异步编程Promise then catch finally的使用
m0_62407740的博客
01-20 1550
在javascript中有两种实现异步的方式，首先第一种是传统的回调函数，另外一种是通过promise. 一.回调函数实现异步. setTimeout(() => { console.log('settimout');//后打印 }, 0); console.log('settimout之后');//先打印 回调函数虽然简单，但是有一个明显的缺点，如果需要依次执行多个异步操作，为了保证顺序就需要回调函数中嵌套。这种回调嵌套不断的嵌套就会形成回调地狱. 二.promise对象...
用gulp前段自动化构建工具的小心了,关于angular.js中取消success,error的功能,用then和.catch
Oliver_web的博客
03-21 5593
1.在使用Angular 1.6版本的$http服务时会抛出异常：$http.get(...).success is not a function 或者$http(...).success is not a function 异常代码如下： [javascript] view plain copy  print? //请求api  
从零开始学_JavaScript_系列（49）——Promise(2)then、值、catch
qq20004604的博客
07-28 2602
4、回调函数返回值与then的返回值4.1、 回调函数返回值回调函数的返回值，指的是Promise实例的then的回调函数resolve和reject的返回值。如代码：let foo = new Promise((resolve, reject) => { resolve("foo"); }).then(msg => { console.log(msg); msg += "
NodeJS 异步操作：更为优雅的实现:thenjs
wangjunzhi93的博客
05-10 1万+
在上一节中，我们实现了批量文件读取，即循环异步函数的并发和有序操作。 总结为： 并发操作可以在Array.forEach 和 Array.map 中进行； 有序操作则在循环中对Promise加入await关键字，意味着同步等待结果，并用async修饰整个函数；由于需要实现在批量读取完成后回调的功能，例如提示操作完成，统计结果等，我们需要在每个循环中判断是否读取到了最后一个 文
es6之promise被坑记
u013628992的专栏
02-18 2万+
怒了，新浪微博也太坑了，代码片段太麻烦了。promise的介绍就不多说了。 几个网址： http://es6.ruanyifeng.com/#docs/promise http://www.html5rocks.com/zh/tutorials/es6/promises/ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe
.then .catch都执行的错误原因
xcytjdlb的博客
04-17 1991
.then()中的代码出错... 细心检查
promise的使用与简写
sanqima的专栏
02-10 1027
    在JS里代码执行大都是单线程的，如果要在一个线程中处理多个事物，就需要使用异步回调。既可以通过回调函来实现异步回调，也可以使用Promise机制来实现异步回调。     下面介绍，js里Promise的使用和简写。 1、需求 用Promise来判断[0,100)之间的数，若数小于50，则返回OK，否则返回failed。 2、初始代码     //one.js function test(resolve,reject) { var num = Math.random()*1
对js Promise理解
米老头
02-10 1万+
1.优点和缺点 可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。 Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将
promise的then和catch
04-15
当一个Promise对象被resolve或reject时，then或catch指定的回调函数会被自动调用。如果Promise对象已经处于resolve状态，then方法指定的回调函数会立即执行；如果Promise对象处于reject状态，则catch方法指定的回调...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kfepiza

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值