JavaScript Promise 是一个异步编程的概念，可以使异步代码变得更加优雅、可读性更高。Promise 提供了一种处理异步操作的方式，其内部包含三个状态：pending、fulfilled 和 rejected。正是这些状态让 Promise 成为了异步编程的核心。
为了更好地理解 Promise，让我们开始深入研究。
Promise 状态解析
1. Pending（进行中）
Promise 初始创建状态为 “pending”（进行中），表示异步操作尚未完成。在这种状态下，可以采取不同的操作：
const promise = new Promise((resolve, reject) => {
// promise 处于进行中
});2. Fulfilled（已成功）
如果异步操作执行成功，Promise 将状态切换为 “fulfilled”（已成功）。
const promise = new Promise((resolve, reject) => {
resolve('成功了');
});
promise.then((res) => {
console.log(res); // "成功了"
})3. Rejected（已失败）
如果异步操作执行失败，Promise 将状态切换为 “rejected”（已失败）。
const promise = new Promise((resolve, reject) => {
reject('失败了');
});
promise.catch((err) => {
console.log(err); // "失败了"
})Promise 的使用
使用 Promise，我们可以无需过多关注回调函数的处理方式。
// javascriptcn.com 代码示例
new Promise((resolve, reject) => {
const time = Math.random() * 5000;
setTimeout(() => {
if (time < 2500) {
resolve('执行成功！');
} else {
reject('执行失败！');
}
}, time);
})
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
console.log('操作完成！');
});Promise 同时执行多个异步任务
Promise 也可以同时执行多个异步任务，并在所有结果返回后返回 Promise 数组。
// javascriptcn.com 代码示例
const p1 = Promise.resolve('成功');
const p2 = Promise.reject('失败');
Promise.all([p1, p2])
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
});Promise 中的错误捕获
当 Promise 中的代码发生错误时，可以在 Promise 中进行捕获和处理。
// javascriptcn.com 代码示例
new Promise((resolve, reject) => {
const time = Math.random() * 5000;
setTimeout(() => {
if (time < 2500) {
resolve('执行成功！');
} else {
reject('执行失败！');
}
}, time);
})
.then((result) => {
throw new Error('出错了！');
console.log(result);
})
.catch((err) => {
console.log(err.message);
})
.finally(() => {
console.log('操作完成！');
});Promise 的优缺点
Promise 作为一种异步编程的解决方案，其优缺点显而易见。
1. 优点
- 美观：代码结构清晰，易于阅读和维护，尤其是多层嵌套的异步代码；
- 稳定：Promise 内部自带 try/catch 捕获错误，保障代码平稳运行；
- 避免回调地狱：可以实现代码的扁平化和简化，减少开发难度和维护困难度。
2. 缺点
- 需要编写额外的 then() 和 catch()；
- 兼容问题：ES6 才支持 Promise，许多低版本浏览器不支持；
- 影响性能：Promise 内部就算代码简单，也需要进行各类逻辑的处理，因此增加了代码的执行时间。
总结
理解 Promise 可以帮助前端开发人员更加优雅地处理异步操作，同时还可以实现代码的简化和更好的可读性。
尽管 Promise 在一些方面表现不佳，并且在部分浏览器中无法很好地兼容，但是其确实是许多前端框架和库的基础。建议开发人员根据业务需求去使用 Promise。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c97777d4982a6eb60bc4d