Appearance
Promise 是 JavaScript 中用于处理异步操作的一种机制。它代表一个未来可能完成或失败的操作及其结果值。
Promise 提供了一种更优雅、可读性更强的方法来处理回调函数嵌套和错误处理。
下面是对 Promise 的详细介绍。
一个 Promise 对象可以处于以下三种状态之一:
Pending(进行中):初始状态,既没有完成也没有失败。 Fulfilled(已成功):操作成功完成,并有一个值。 Rejected(已失败):操作失败,并有一个原因。
javascript
function getUser(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('User information retrieved');
if (!userId) {
reject('Error: Invalid userId');
} else {
resolve({ userId: userId, username: 'John Doe' });
}
}, 2000);
});
}
function getOrders(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Orders retrieved');
if (userId !== 1) {
reject('Error: No orders found for this user');
} else {
resolve([{ orderId: 1, amount: 100 }, { orderId: 2, amount: 150 }]);
}
}, 2000);
});
}
function calculateTotal(orders) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (!Array.isArray(orders) || orders.length === 0) {
reject('Error: No valid orders to calculate total');
} else {
const total = orders.reduce((sum, order) => sum + order.amount, 0);
console.log('Total calculated');
resolve(total);
}
}, 1000);
});
}
// 使用 Promise 链式调用,避免了原始方式的多层嵌套
getUser(1)
.then(user => {
console.log('User:', user);
return getOrders(user.userId);
})
.then(orders => {
console.log('Orders:', orders);
return calculateTotal(orders);
})
.then(total => {
console.log('Total amount:', total);
})
.catch(error => {
console.error('Error:', error);
});
// async、await进一步提高了异步操作的可读性,使用 async/await 和错误处理
async function processOrder(userId) {
try {
const user = await getUser(userId);
console.log('User:', user);
const orders = await getOrders(user.userId);
console.log('Orders:', orders);
const total = await calculateTotal(orders);
console.log('Total amount:', total);
} catch (error) {
console.error('Error:', error); // 捕获任何 reject 触发的错误
}
}
// 调用 async 函数
processOrder(1); // 正常情况
processOrder(0); // 无效的 userId
processOrder(2); // userId 2 没有订单