JavaScript 异常捕获从同步到异步怎样实现？Promise 错误处理要点是什么？

在JavaScript的进化历程中，异步编程始终是开发者的核心挑战。从最初的同步try/catch到如今的Promise异步处理，错误捕获机制经历了革命性的演变。特别是在现代前端框架和Node.js应用中，掌握Promise的异常处理要点已成为开发者的必备技能——它能有效避免程序崩溃、提升用户体验，更是构建健壮应用的基石。

一、同步到异步的错误捕获演变

1.1 同步时代的防御工事

try/catch是同步代码的经典防御：
```javascript
function syncTask() {
try {
JSON.parse('invalid json');
} catch (e) {
console.error('捕获同步错误:', e);
}
}
```
但在异步场景立即失效：
```javascript
try {
setTimeout(() => {
throw new Error('异步错误逃逸！'); // 无法被捕获
}, 100);
} catch (e) { / 此处不会执行 / }
```

1.2 异步处理的三次进化

回调地狱时期采用错误优先模式：
```javascript
fs.readFile('file.txt', (err, data) => {
if (err) return handleError(err);
// 处理数据
});
```
这种模式导致深层嵌套和错误处理分散，催生了Promise解决方案。

二、Promise错误处理核心要点

2.1 基础防御机制

.catch()是Promise的错误守门员：
```javascript
fetch('/api/data')
.then(res => res.json())
.catch(err => console.error('请求失败:', err)); // 捕获链式错误
```

2.2 高级防护策略

• 错误冒泡机制：未处理的异常会沿Promise链传递
• 全局兜底方案：监听unhandledrejection事件

```javascript
// 全局捕获未处理的Promise拒绝
window.addEventListener('unhandledrejection', event => {
console.warn('未捕获的Promise异常:', event.reason);
event.preventDefault(); // 阻止浏览器默认错误提示
});
```

2.3 async/await的现代战争

try/catch的复兴：
```javascript
async function fetchData() {
try {
const res = await fetch('/api');
return await res.json();
} catch (err) {
console.error('异步请求失败:', err);
throw err; // 保持错误冒泡
}
}
```

三、框架级错误处理方案

3.1 React错误边界

class组件示例：
```javascript
class ErrorBoundary extends React.Component {
componentDidCatch(error, info) {
logErrorToService(error, info.componentStack);
}
render() {
return this.props.children;
}
}
```
注意局限：无法捕获异步代码、事件处理中的错误。

3.2 Vue全局守卫

```javascript
Vue.config.errorHandler = (err, vm, info) => {
console.error(`全局错误: ${info}`, err);
// 上报错误到监控系统
};
```

四、最佳实践清单

• 永远添加.catch() 即使只是日志记录
• 错误类型判断 区分网络错误、业务错误等
• 全局兜底+精细处理 双保险策略
• 错误信息增强 添加上下文信息

终极防护代码示例：
```javascript
function safeFetch(url) {
return fetch(url)
.then(res => {
if (!res.ok) throw new Error(`HTTP错误 ${res.status}`);
return res.json();
})
.catch(err => {
err.requestUrl = url; // 添加上下文
throw err; // 继续传递
});
}

// 使用示例
safeFetch('/api/data')
.then(data => updateUI(data))
.catch(err => showErrorToast(err.message));
```

掌握这些核心要点，您将能构建出健壮如堡垒的JavaScript应用。记住：好的错误处理不是让程序永不崩溃，而是让崩溃变得可预测、可追踪、可修复。