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就不会执行rejectreject("传入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就不会执行resolveresolve("传入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 有三种状态：

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

Promise 的基本用法如下：

创建一个新的 Promise 对象：

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

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

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

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

promise.then(result => {console.log(result); // 处理 Promise 成功后的结果
});

使用 .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是一种用于处理异步操作的对象。它将异步操作的结果以同步的方式进行处理，使得代码更加清晰和易于维护。

Promise的基本概念：
- Promise是一个对象，它代表了一个异步操作的最终完成或失败的结果。
- Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
- Promise的状态一旦改变，就不会再变。
Promise的基本用法：
- 创建Promise对象：使用Promise构造函数来创建一个Promise对象，构造函数接受一个执行器函数作为参数。
- 执行器函数：执行器函数接受两个参数，分别是resolve和reject。在异步操作完成时，调用resolve函数将Promise的状态改为fulfilled；在异步操作失败时，调用reject函数将Promise的状态改为rejected。
- 处理Promise的结果：可以使用then方法来处理Promise的结果，then方法接受两个回调函数作为参数，分别是在Promise状态变为fulfilled时调用的回调函数和在Promise状态变为rejected时调用的回调函数。
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);});