Promise 串行执行与全部并行执行的选择
在前端开发中，我们经常会遇到需要同时或者依次执行多个异步操作的情况。通过使用 Promise 技术，可以轻松地管理这些异步操作的执行顺序和结果。在实际开发中，我们面临着一个选择：是串行执行还是全部并行执行？本文将就这一话题展开详细的讨论。
- 什么是 Promise
Promise 是一种封装异步操作的技术，它包括三个状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。当异步操作完成后，Promise 对象会从 pending 状态转变为 fulfilled 或者 rejected 状态，同时传递异步操作结果。Promise 对象可以通过 then() 和 catch() 方法注册回调函数，分别处理异步操作成功和失败的情况。
- 串行执行 Promise
串行执行 Promise 指的是按照一定的顺序执行多个异步操作，每个异步操作必须在前一个操作完成后才能开始执行。这种方法适用于需要维持执行顺序的异步操作，例如：登录后获取用户信息、根据用户信息获取订单列表、根据订单列表逐一请求订单详情等等。
示例代码如下：
// javascriptcn.com 代码示例
function getUserInfo() {
return new Promise((resolve, reject) => {
// 异步获取用户信息
setTimeout(() => {
console.log("获取用户信息");
resolve({ id: 1, name: "Alice", age: 20 });
}, 1000);
});
}
function getOrderList(userInfo) {
return new Promise((resolve, reject) => {
// 异步获取订单列表
setTimeout(() => {
console.log(`获取 ${userInfo.name} 的订单列表`);
resolve([{ id: 1, name: "订单1" }, { id: 2, name: "订单2" }]);
}, 2000);
});
}
function getOrderDetail(order) {
return new Promise((resolve, reject) => {
// 异步获取订单详情
setTimeout(() => {
console.log(`获取订单 ${order.name} 的详情`);
resolve({ id: 1, name: "商品1", price: 100 });
}, 3000);
});
}
// 串行执行 Promise
getUserInfo()
.then((userInfo) => getOrderList(userInfo))
.then((orderList) => {
const promises = orderList.map((order) => getOrderDetail(order));
return Promise.all(promises);
})
.then((orderDetails) => console.log(orderDetails))
.catch((error) => console.error(error));上述代码首先调用 getUserInfo() 方法获取用户信息，然后通过 then() 方法传递给 getOrderList() 方法，获取用户的订单列表。接着使用 map() 方法遍历订单列表，逐一调用 getOrderDetail() 方法获取每个订单的详情信息。最后，调用 Promise.all() 方法等待所有订单详情都获取完成后输出订单详情数组。
- 全部并行执行 Promise
全部并行执行 Promise 指的是同时执行多个异步操作，每个异步操作之间完全独立，不需要等待其他操作的完成。这种方法适用于需要同时获取多个独立的异步数据的情况，例如：同时获取多个商品信息、同时请求多个 API 接口等等。
示例代码如下：
// javascriptcn.com 代码示例
function fetchGoods(goodIds) {
const promises = goodIds.map((id) => {
// 异步获取商品信息
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(`获取商品 ${id} 的信息`);
resolve({ id, name: `商品${id}`, price: 100 });
}, Math.random() * 3000);
});
});
return Promise.all(promises);
}
// 全部并行执行 Promise
fetchGoods([1, 2, 3, 4, 5])
.then((goods) => console.log(goods))
.catch((error) => console.error(error));上述代码调用 fetchGoods() 方法同时获取五个商品的信息，使用 Promise.all() 方法等待所有商品信息获取完成后输出商品信息数组。
- 总结
在实际开发中，需要根据实际情况选择合适的 Promise 执行方式。串行执行 Promise 用于维持异步操作的顺序关系，适用于需要前后顺序执行的异步操作场景。全部并行执行 Promise 适用于同时获取多个独立的异步数据场景，能够提高数据获取的效率。因此，根据实际业务需求的不同，选择合适的 Promise 执行方式能够提高代码的可读性和性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6537805b7d4982a6eb006691