异步编程的演进与Promise核心概念
在现代JavaScript开发中，异步操作已成为不可或缺的部分。从最初的回调函数到Promise对象，再到async/await语法糖，JavaScript的异步处理能力不断进化。Promise作为承上启下的关键特性，为我们提供了更优雅的异步解决方案。
Promise基础回顾
// Promise的三种状态
const pending = new Promise((resolve, reject) => {
// 初始状态为pending
});
const fulfilled = Promise.resolve('操作成功');
const rejected = Promise.reject(new Error('操作失败'));Promise链式调用的艺术
Promise的真正威力在于其链式调用能力，这让我们能够以接近同步代码的方式组织异步操作。
基础链式调用示例
function fetchUserData(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userId) {
resolve({ id: userId, name: '张三', age: 25 });
} else {
reject(new Error('用户ID不能为空'));
}
}, 1000);
});
}
function processUserData(user) {
return new Promise(resolve => {
setTimeout(() => {
user.processed = true;
user.timestamp = new Date().toISOString();
resolve(user);
}, 500);
});
}
// 链式调用实践
fetchUserData(123)
.then(user => {
console.log('获取用户数据:', user);
return processUserData(user);
})
.then(processedUser => {
console.log('处理后的用户数据:', processedUser);
return processedUser;
})
.catch(error => {
console.error('处理过程中发生错误:', error.message);
});高级错误处理策略
在复杂的异步操作中，合理的错误处理是保证应用稳定性的关键。
局部错误处理与全局错误处理
class DataProcessor {
constructor() {
this.retryCount = 0;
this.maxRetries = 3;
}
async fetchWithRetry(url, options = {}) {
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP错误! 状态码: ${response.status}`);
}
return await response.json();
} catch (error) {
if (this.retryCount {
try {
const result = await this.fetchWithRetry(request.url, request.options);
return { success: true, data: result, index };
} catch (error) {
return { success: false, error: error.message, index };
}
});
const results = await Promise.allSettled(promises);
return this.analyzeResults(results);
}
analyzeResults(results) {
const successful = results.filter(r => r.value.success);
const failed = results.filter(r => !r.value.success);
return {
total: results.length,
successful: successful.length,
failed: failed.length,
successRate: (successful.length / results.length * 100).toFixed(2) + '%',
failures: failed.map(f => ({
index: f.value.index,
error: f.value.error
}))
};
}
}
// 使用示例
const processor = new DataProcessor();
const requests = [
{ url: '/api/user/1' },
{ url: '/api/user/2' },
{ url: '/api/user/invalid' } // 模拟失败请求
];
processor.processMultipleRequests(requests)
.then(report => {
console.log('处理报告:', report);
})
.catch(error => {
console.error('全局错误:', error);
});实战案例：电商订单处理系统
让我们通过一个完整的电商订单处理案例，展示Promise链在实际业务中的应用。
class OrderProcessor {
constructor() {
this.steps = [
'validateOrder',
'checkInventory',
'processPayment',
'updateInventory',
'sendConfirmation'
];
}
async validateOrder(order) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (!order.items || order.items.length === 0) {
reject(new Error('订单商品不能为空'));
} else if (!order.customerId) {
reject(new Error('客户ID不能为空'));
} else {
console.log('订单验证通过');
resolve(order);
}
}, 200);
});
}
async checkInventory(order) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const outOfStock = order.items.filter(item => item.quantity > 10);
if (outOfStock.length > 0) {
reject(new Error(`商品 ${outOfStock[0].id} 库存不足`));
} else {
console.log('库存检查通过');
resolve(order);
}
}, 300);
});
}
async processPayment(order) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const total = order.items.reduce((sum, item) =>
sum + (item.price * item.quantity), 0);
if (order.paymentMethod.balance {
setTimeout(() => {
console.log('库存更新完成');
order.inventoryUpdated = true;
resolve(order);
}, 400);
});
}
async sendConfirmation(order) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('确认邮件已发送');
order.confirmationSent = true;
resolve(order);
}, 300);
});
}
async processOrder(order) {
console.log('开始处理订单...');
try {
let processedOrder = order;
// 使用reduce构建Promise链
const result = await this.steps.reduce(async (previousStep, currentStep) => {
await previousStep;
console.log(`执行步骤: ${currentStep}`);
return await this[currentStep](processedOrder);
}, Promise.resolve());
console.log('订单处理完成!');
return {
success: true,
order: result,
message: '订单处理成功'
};
} catch (error) {
console.error('订单处理失败:', error.message);
return {
success: false,
error: error.message,
order: order,
message: '订单处理失败'
};
}
}
}
// 测试订单处理
const testOrder = {
customerId: 'cust-123',
items: [
{ id: 'item-1', name: '商品A', price: 100, quantity: 2 },
{ id: 'item-2', name: '商品B', price: 50, quantity: 1 }
],
paymentMethod: { type: 'credit', balance: 500 }
};
const processor = new OrderProcessor();
processor.processOrder(testOrder)
.then(result => {
console.log('最终结果:', result);
})
.catch(error => {
console.error('未处理的错误:', error);
});性能优化与最佳实践
1. 并行处理优化
async function parallelProcessing(tasks) {
// 使用Promise.all进行并行处理
const results = await Promise.all(
tasks.map(async (task, index) => {
try {
const result = await processTask(task);
return { index, status: 'success', data: result };
} catch (error) {
return { index, status: 'error', error: error.message };
}
})
);
return results;
}2. 超时控制
function withTimeout(promise, timeoutMs, timeoutMessage = '操作超时') {
let timeoutId;
const timeoutPromise = new Promise((_, reject) => {
timeoutId = setTimeout(() => reject(new Error(timeoutMessage)), timeoutMs);
});
return Promise.race([promise, timeoutPromise])
.finally(() => clearTimeout(timeoutId));
}
// 使用示例
async function fetchWithTimeout(url, timeout = 5000) {
return withTimeout(fetch(url), timeout, '网络请求超时');
}总结
通过本文的深入讲解和实战案例，我们全面掌握了JavaScript Promise链式调用和错误处理的高级技巧。关键要点包括：
- Promise链的优雅错误传递机制
- 局部与全局错误处理的策略选择
- 使用async/await简化异步代码
- 并行处理与性能优化技巧
- 超时控制与重试机制的实现
这些技术将帮助您构建更健壮、可维护的异步JavaScript应用程序，有效提升开发效率和代码质量。
// 页面加载完成后的演示代码
document.addEventListener(‘DOMContentLoaded’, function() {
console.log(‘页面加载完成，可以开始异步编程实践!’);
// 简单的演示
const demoPromise = Promise.resolve(‘演示数据加载成功’);
demoPromise.then(data => {
console.log(‘演示:’, data);
});
});
