JavaScript Promise全解析
这段代码是一个 HTML 文件，其中包含一个 <script> 标签，里面用 JavaScript 实现了 Promise 的相关功能。以下是代码的详细解释和总结：
这段代码演示了 JavaScript 中 Promise 的基本用法，包括：
- 创建 Promise 对象。
- 使用
then、catch和finally方法处理 Promise 的状态。 - 使用
Promise.resolve和Promise.reject快速创建 Promise 对象。 - 使用
Promise.all和Promise.allSettled处理多个 Promise 对象。
通过 Promise，可以更好地管理异步操作，避免回调地狱（Callback Hell），并提高代码的可读性和可维护性。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>TODO://实例化一个promise对象// promise对象有三种状态// pending(等待) fulfilled(成功) rejected(失败)// promise对象的状态只能从pending转换为fulfilled或者rejected// promise对象的状态一旦转换，就不会再变化// promise对象的状态转换只能由pending转换为fulfilled或者rejected// promise对象的状态转换不受外界影响// promise对象的状态转换只能发生一次// promise对象的状态转换一旦发生，就会立即执行then方法指定的回调函数// promise对象的then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行let p=new Promise((resolve,reject)=>{//resolve:成功时执行的函数//reject:失败时执行的函数//resolve('成功');reject('失败');});p.then((data)=>{console.log(data);},(err)=>{console.log(err);});console.log('同步任务');TODO://promise对象的then方法可以被多次调用//promise对象的then方法返回一个新的promise对象//promise对象的then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行let p1=new Promise((resolve,reject)=>{resolve('成功');});p1.then((data)=>{console.log(data);return '成功';},(err)=>{console.log(err);}).then((data)=>{console.log(data);},(err)=>{console.log(err);});TODO://catch方法用于指定promise对象状态为rejected时的回调函数//catch方法返回一个新的promise对象//catch方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行let p2=new Promise((resolve,reject)=>{reject('失败');});p2.then((data)=>{console.log(data);}).catch((err)=>{console.log(err);});TODO://finally方法用于指定promise对象状态为fulfilled或者rejected时的回调函数//finally方法返回一个新的promise对象//finally方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行let p3=new Promise((resolve,reject)=>{resolve('成功');});p3.then((data)=>{console.log(data);}).finally(()=>{console.log('finally');});let p4=new Promise((resolve,reject)=>{reject('失败');});p4.then((data)=>{console.log(data);}).finally(()=>{console.log('finally');});TODO://Promise.resolve方法用于将现有对象转换为promise对象//Promise.resolve方法返回一个新的promise对象//Promise.resolve方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行let p5=Promise.resolve('成功');p5.then((data)=>{console.log(data);});TODO://Promise.reject方法用于将现有对象转换为promise对象//Promise.reject方法返回一个新的promise对象//Promise.reject方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行let p6=Promise.reject('失败');p6.then((data)=>{console.log(data);}).catch((err)=>{console.log(err);});TODO://Promise.all方法用于将多个promise对象包装成一个新的promise对象(全部成功才返回成功，有一个失败就返回失败)//Promise.all方法返回一个新的promise对象//Promise.all方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行let p7=Promise.resolve('成功');let p8=Promise.resolve('成功');let p9=Promise.resolve('成功');Promise.all([p7,p8,p9]).then((data)=>{console.log(data);});//Promise.allSettled方法用于将多个promise对象包装成一个新的promise对象//Promise.allSettled方法返回一个新的promise对象//Promise.allSettled方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行let p10=Promise.resolve('成功');let p11=Promise.resolve('成功');let p12=Promise.resolve('成功');Promise.allSettled([p10,p11,p12]).then((data)=>{console.log(data);});</script>
</head>
<body></body>
</html>1. Promise 的基本概念
Promise 是 JavaScript 中用于处理异步操作的对象。它有三种状态：
- Pending（等待）: 初始状态，既不是成功，也不是失败。
- Fulfilled（成功）: 操作成功完成。
- Rejected（失败）: 操作失败。
Promise 的状态一旦从 Pending 转换为 Fulfilled 或 Rejected，就不会再改变。
2. 代码中的 Promise 示例
(1) 基本 Promise 示例
javascript
let p = new Promise((resolve, reject) => {reject('失败');
});p.then((data) => {console.log(data);
}, (err) => {console.log(err);
});console.log('同步任务');- 解释:
- 创建一个 Promise 对象
p，并立即调用reject('失败')，将状态设置为 Rejected。 - 使用
then方法注册回调函数：- 第一个回调函数处理成功状态（Fulfilled）。
- 第二个回调函数处理失败状态（Rejected）。
console.log('同步任务')是同步代码，会先于 Promise 的回调函数执行。
- 创建一个 Promise 对象
- 输出:
同步任务 失败
(2) 链式调用 then 方法
javascript
let p1 = new Promise((resolve, reject) => {resolve('成功');
});p1.then((data) => {console.log(data);return '成功';
}).then((data) => {console.log(data);
});- 解释:
- 创建一个 Promise 对象
p1，并立即调用resolve('成功')，将状态设置为 Fulfilled。 - 第一个
then方法处理成功状态，并返回一个新的值'成功'。 - 第二个
then方法接收上一个then方法的返回值，并打印出来。
- 创建一个 Promise 对象
- 输出:
成功 成功
(3) 使用 catch 方法处理错误
javascript
let p2 = new Promise((resolve, reject) => {reject('失败');
});p2.then((data) => {console.log(data);
}).catch((err) => {console.log(err);
});- 解释:
- 创建一个 Promise 对象
p2，并立即调用reject('失败')，将状态设置为 Rejected。 then方法不会处理失败状态，因此使用catch方法捕获错误。
- 创建一个 Promise 对象
- 输出:
失败
(4) 使用 finally 方法
javascript
let p3 = new Promise((resolve, reject) => {resolve('成功');
});p3.then((data) => {console.log(data);
}).finally(() => {console.log('finally');
});- 解释:
- 创建一个 Promise 对象
p3，并立即调用resolve('成功')，将状态设置为 Fulfilled。 finally方法无论 Promise 成功还是失败，都会执行。
- 创建一个 Promise 对象
- 输出:
成功 finally
(5) 使用 Promise.resolve 和 Promise.reject
javascript
let p5 = Promise.resolve('成功');
p5.then((data) => {console.log(data);
});let p6 = Promise.reject('失败');
p6.then((data) => {console.log(data);
}).catch((err) => {console.log(err);
});- 解释:
Promise.resolve直接创建一个状态为 Fulfilled 的 Promise 对象。Promise.reject直接创建一个状态为 Rejected 的 Promise 对象。
- 输出:
成功 失败
(6) 使用 Promise.all 和 Promise.allSettled
javascript
let p7 = Promise.resolve('成功');
let p8 = Promise.resolve('成功');
let p9 = Promise.resolve('成功');Promise.all([p7, p8, p9]).then((data) => {console.log(data);
});let p10 = Promise.resolve('成功');
let p11 = Promise.resolve('成功');
let p12 = Promise.resolve('成功');Promise.allSettled([p10, p11, p12]).then((data) => {console.log(data);
});- 解释:
Promise.all: 将多个 Promise 对象包装成一个新的 Promise 对象，只有所有 Promise 都成功时，才会返回成功状态。Promise.allSettled: 无论 Promise 成功还是失败，都会返回结果。
- 输出:
['成功', '成功', '成功'] [{ status: 'fulfilled', value: '成功' },{ status: 'fulfilled', value: '成功' },{ status: 'fulfilled', value: '成功' } ]
3. 总结
这段代码演示了 JavaScript 中 Promise 的基本用法，包括：
- 创建 Promise 对象。
- 使用
then、catch和finally方法处理 Promise 的状态。 - 使用
Promise.resolve和Promise.reject快速创建 Promise 对象。 - 使用
Promise.all和Promise.allSettled处理多个 Promise 对象。
通过 Promise，可以更好地管理异步操作，避免回调地狱（Callback Hell），并提高代码的可读性和可维护性。