批量请求失败的错误处理与避免重复toast策略
在现代的Web应用程序中，批量请求是非常常见的操作。无论是上传多个文件、批量删除数据，还是同时发送多个API请求，批量请求都能显著提高用户体验和系统效率。然而，当这些请求中的一部分或全部失败时，如何优雅地处理错误信息，尤其是如何避免重复弹出错误提示（如toast），是一个需要仔细考虑的问题。
1. 理解批量请求和错误处理的基本概念
批量请求通常指的是在短时间内发送多个独立的请求，这些请求可能是并行的，也可能是串行的。例如，在一个电商网站中，用户可能会同时选择多个商品进行结算，系统需要为每个商品生成一个订单请求。
错误处理则是指在请求失败时，系统如何向用户反馈错误信息。常见的错误反馈方式包括弹出toast、显示模态框、在页面中嵌入错误信息等。其中，toast是一种轻量级的、非阻塞式的通知方式，通常会在屏幕的某个角落短暂显示，然后自动消失。
2. 批量请求失败时弹出多个toast的问题
当批量请求中的多个请求失败时，如果每个失败请求都触发一个toast，用户可能会看到一连串的toast弹出，这不仅会干扰用户的注意力，还可能导致用户忽略重要的错误信息。此外，频繁的toast弹出也会影响用户体验，尤其是在移动设备上，屏幕空间有限，过多的toast可能会遮挡重要内容。
3. 解决方案：聚合错误信息并统一弹出toast
为了避免批量请求失败时弹出多个toast，可以采用以下策略：
3.1 聚合错误信息
在发送批量请求时，可以设置一个错误收集器（error collector），用于收集所有失败请求的错误信息。这个错误收集器可以是一个数组、对象或其他数据结构，具体取决于应用程序的需求。
const errorCollector = [];
3.2 统一处理错误
当所有请求完成后，检查错误收集器中是否有错误信息。如果有，则将这些错误信息聚合起来，统一弹出一个toast。这样可以确保用户只看到一个toast，而不是多个。
if (errorCollector.length > 0) {
const errorMessage = errorCollector.join('\n'); // 将多个错误信息合并为一个字符串
showToast(errorMessage); // 弹出统一的toast
}
3.3 示例代码
以下是一个简单的示例代码，展示了如何在批量请求失败时只弹出一个toast：
const requests = [
fetch('/api/request1'),
fetch('/api/request2'),
fetch('/api/request3')
];
const errorCollector = [];
Promise.allSettled(requests).then(results => {
results.forEach((result, index) => {
if (result.status === 'rejected') {
errorCollector.push(`请求 ${index + 1} 失败: ${result.reason.message}`);
}
});
if (errorCollector.length > 0) {
const errorMessage = errorCollector.join('\n');
showToast(errorMessage);
}
});
在这个示例中，Promise.allSettled用于等待所有请求完成，无论成功或失败。然后，遍历所有结果，将失败请求的错误信息收集到errorCollector中。最后，如果errorCollector中有错误信息，则弹出一个统一的toast。
4. 进一步优化
4.1 错误信息的格式化
可以根据应用程序的需求，对错误信息进行格式化。例如，可以将错误信息分类、添加时间戳、或者根据错误类型显示不同的图标。
const errorMessage = errorCollector.map((error, index) => `错误 ${index + 1}: ${error}`).join('\n');
4.2 错误信息的持久化
在某些情况下，可能需要将错误信息持久化，以便用户可以在稍后查看。可以将错误信息存储在本地存储（localStorage）或发送到服务器进行记录。
localStorage.setItem('lastError', errorMessage);
4.3 用户交互
除了弹出toast，还可以提供更多的用户交互选项。例如，可以在toast中添加一个“查看详情”按钮，点击后显示一个模态框，列出所有失败请求的详细信息。
showToast(errorMessage, {
action: {
text: '查看详情',
onClick: () => showErrorModal(errorCollector)
}
});
5. 总结
在批量请求失败时，避免弹出多个toast是提升用户体验的重要一环。通过聚合错误信息并统一弹出toast，不仅可以减少用户的干扰，还能更清晰地传达错误信息。此外，通过进一步优化错误信息的格式化和用户交互，可以进一步提升应用程序的健壮性和用户满意度。
在实际开发中，应根据具体的应用场景和用户需求，灵活调整错误处理的策略。无论是简单的toast通知，还是复杂的错误处理流程，目标都是为用户提供清晰、友好且高效的反馈。