Promise链通过.catch()捕获错误，async/await使用try...catch处理异常，两者需结合全局unhandledrejection事件和顶层.catch()确保所有错误被捕捉，避免程序崩溃。
JavaScript的异步错误处理策略核心在于如何优雅地捕获和处理Promise链和async/await中的异常，避免程序崩溃或产生难以追踪的错误。关键在于理解Promise的reject和try...catch的结合使用。
Promise链中的错误处理依赖于
.catch()方法。async/await本质上是Promise的语法糖，错误处理则需要结合
try...catch语句。统一捕获异常的策略需要将两者结合，并在顶层进行全局处理。
Promise链如何优雅地处理异步错误？
Promise链的错误处理机制是基于
.catch()方法。当Promise链中的任何一个Promise被reject时，控制权会立即传递到最近的
.catch()处理程序。如果没有
.catch()，错误会一直传递到Promise链的末尾，可能导致未处理的Promise rejection。
立即学习“Java免费学习笔记（深入）”；
例如：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok'); // 模拟一个错误
}
return response.json();
})
.then(data => {
console.log('Data:', data);
// 进一步处理数据
})
.catch(error => {
console.error('There was a problem fetching the data:', error);
// 用户友好的错误提示
});在这个例子中，如果
fetch请求失败或者
response.ok为false，
throw new Error()会触发Promise的reject状态，控制权会立即传递到
.catch()处理程序。在
.catch()中，我们可以记录错误、向用户显示友好的错误信息，或者尝试从错误中恢复。关键点在于，即使在
.then()中抛出错误，也能被
.catch()捕获。
async/await如何使用try...catch进行错误处理？
async/await简化了异步代码的编写，但错误处理依然重要。
async函数内部的
await语句如果抛出异常，会被
try...catch块捕获。
看下面的例子：
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log('Data:', data);
return data;
} catch (error) {
console.error('There was a problem fetching the data:', error);
// 可以选择重新抛出错误，或者返回一个默认值
throw error; // 或者 return null;
}
}
fetchData().catch(error => {
console.error('Global error handler:', error);
});这里，
try...catch块包裹了
await语句，如果
fetch或
response.json()抛出异常，
catch块会捕获这个异常。
catch块可以选择处理这个错误（例如记录日志、显示错误信息），或者重新抛出这个错误，让上层调用者处理。
注意，
async函数本身返回一个Promise。因此，即使在
async函数内部使用了
try...catch，仍然需要在调用
async函数的地方使用
.catch()处理可能发生的未捕获的异常。
如何在Promise链和async/await中统一捕获异常？
统一捕获异常的核心思想是在顶层设置一个全局的错误处理机制，确保所有未被处理的异常都能被捕获和记录。
一种方法是使用全局的
unhandledrejection事件监听器。这个事件会在Promise被reject，并且没有
.catch()处理程序时触发。
window.addEventListener('unhandledrejection', event => {
console.error('Unhandled rejection:', event.reason);
// 可以发送错误报告到服务器
// 可以显示一个全局的错误提示
event.preventDefault(); // 阻止默认行为，避免浏览器控制台显示错误
});另一种方法是在
async函数的顶层调用者处始终添加
.catch()处理程序。
async function main() {
// ... 业务逻辑 ...
}
main().catch(error => {
console.error('Global error handler:', error);
// 全局错误处理逻辑
});结合使用
unhandledrejection事件监听器和顶层的
.catch()处理程序，可以确保所有异步错误都能被捕获和处理，从而提高应用的健壮性。
如何避免Promise链中的“吞噬”错误？
“吞噬”错误指的是在
.catch()处理程序中没有正确处理错误，导致错误信息丢失，难以调试。要避免这种情况，需要确保在
.catch()中：
-
记录完整的错误信息：使用
console.error()
记录错误对象、堆栈信息等。 -
重新抛出错误或返回一个有意义的默认值：如果
.catch()
无法完全处理错误，应该重新抛出错误，让上层调用者处理。或者，返回一个默认值，避免程序崩溃。 -
避免空的
.catch()
块：空的.catch()
块会直接忽略错误，导致错误信息丢失。
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('Data:', data);
})
.catch(error => {
console.error('Error fetching data:', error);
// 重新抛出错误，让上层调用者处理
throw error;
});异步错误处理的最佳实践是什么？
异步错误处理没有银弹，需要根据具体场景选择合适的策略。一些最佳实践包括：
-
尽早捕获错误：在Promise链或
async
函数内部尽早使用.catch()
或try...catch
捕获错误，避免错误扩散。 -
使用有意义的错误信息：在
throw new Error()
时，提供清晰、有用的错误信息，方便调试。 -
全局错误处理：设置全局的
unhandledrejection
事件监听器和顶层的.catch()
处理程序，确保所有未处理的错误都能被捕获。 -
避免“吞噬”错误：在
.catch()
处理程序中正确处理错误，记录完整的错误信息，并重新抛出错误或返回一个有意义的默认值。 - 使用错误边界（Error Boundaries）：在React等UI框架中，可以使用错误边界组件来捕获组件渲染过程中发生的错误，避免整个应用崩溃。
JavaScript的异步错误处理是一个复杂但至关重要的领域。理解Promise链和async/await的错误处理机制，并结合全局错误处理策略，可以编写出更健壮、更易于维护的异步代码。
