本文深入解析 JavaScript Promise 的核心机制，阐述其如何解决回调地狱、错误处理及多异步操作难题。详细对比 .then() 链式调用、Promise.resolve/reject 及 Promise.all 的用法，并结合代码示例说明其与 async/await 在并发处理上的性能差异，帮助开发者编写更清晰的异步代码。
一 什么是 Promise？
Promise 对象可以被视为一个容器，内部封装了执行具体逻辑的代码。当这段代码执行完毕后，会触发两个回调函数：一个用于处理操作成功的状态（resolve），另一个用于处理操作失败的状态（reject）。
二 为什么有 Promise？
Promise 的引入旨在解决传统异步编程中回调机制存在的几个主要痛点：
- Callback hell
回调地狱（Callback hell）：通过 Promise，可以将层层嵌套的回调函数转换为链式的 .then().then()… 结构，从而显著提升代码的可读性和编写体验。
- 错误处理复杂：相较于传统回调，Promise 提供了更清晰、直观的错误处理机制。
- 多异步操作协同困难：Promise 能够简化多个异步操作同时执行时的代码编写逻辑。
三 Promise常用api
- .then()：在 Promise 方法执行完成后调用，接收两个参数，分别为成功时的回调函数和失败时的回调函数。
- resolve：通过 Promise.resolve 方法可快速返回一个已解决的 Promise 对象。
- reject：通过 Promise.reject 方法可快速返回一个已拒绝的 Promise 对象。
- all：用于同时执行多个并行异步操作，并等待所有操作完成。
四 Promise常用的两个用法
1 如何解决 callback hell？
若 .then() 中的函数没有返回值，Promise 链将在此处中断，后续再调用 .then() 将无效。
Promise.resolve('foo').then(function(s) {
console.log(s);
}).then(function(s) {
// Never executed
console.log(s);
});
若 .then() 中的函数有返回值，Promise 链将继续向后传递。
Promise.resolve('foo').then(function(s) {
console.log(s);
return s + 'bar';
}).then(function(s) {
console.log(s);
});
// foo
// foobar
若 .then() 中的函数有返回值且该值为另一个 Promise 对象，Promise 链同样会继续。与前者的区别在于，此时再次调用 .then() 可能触发异步操作，因此下一轮 resolve() 不会立即触发。
Promise.resolve('foo').then(function(s) {
return new Promise((resolve, reject) => {
console.log(s);
setTimeout(() => {
resolve(s + 'bar')
}, 1000);
});
}).then(function(s) {
console.log(s);
});
// foo
// foobar (在 "foo" 显示了 1s 后显示)
2 Promise.all() 实现并发同步接收返回值 应用场景描述（你需要同时调多个接口的数据，并在前端对数据进行处理，这就需要等待所有接口返回数据后才能操作。）
// demo
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
// expected output: Array [3, 42, "foo"]
Promise.all() 与 sync await区别
//sync await 操作时间2秒
async function Index2() {
console.time()
const p1 =await new Promise((resolve, reject) => {
console.log('这里是p1')
setTimeout(() => {
resolve('这里是p1的返回')
}, 1000)
})
const p2 =await new Promise((resolve, reject) => {
console.log('这里是p2')
setTimeout(() => {
resolve('这里是p2的返回')
}, 1000)
})
console.log(p1)
console.log(p2)
console.timeEnd()
}
Index2();
// 使用Promise.all()来实现调用。操作时间1秒
function Index() {
console.time()
const p1 = new Promise((resolve, reject) => {
console.log('这里是p1')
setTimeout(() => {
resolve('这里是p1的返回')
}, 1000)
})
const p2 = new Promise((resolve, reject) => {
console.log('这里是p2')
setTimeout(() => {
resolve('这里是p2的返回')
}, 1000)
})
Promise.all([p1, p2]).then((val) => {
console.log(val)
console.timeEnd()
})
}
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注本站的更多内容!