常见错误拦截
在 JavaScript 中有多种方式可以拦截和处理错误。错误类型可以参考 错误处理机制 。
这边介绍几种主要的拦截方法:
- try...catch 语句
javascript
try {
// 可能会抛出错误的代码
throw new Error('发生了一个错误');
} catch (error) {
// 处理错误
console.error('捕获到错误:', error.message);
} finally {
// 无论是否发生错误都会执行的代码
console.log('清理工作');
}
- Promise 错误处理
javascript
// 方法 1:使用 .catch()
somePromise()
.then(result => {
// 处理成功
})
.catch(error => {
// 处理错误
console.error('Promise 错误:', error);
});
// 方法 2:使用 async/await 配合 try/catch
async function handlePromise() {
try {
const result = await somePromise();
// 处理成功
} catch (error) {
// 处理错误
console.error('Async/Await 错误:', error);
}
}
- 全局错误处理
javascript
// 处理未捕获的 Promise 错误
window.addEventListener('unhandledrejection', event => {
console.error('未处理的 Promise 错误:', event.reason);
event.preventDefault(); // 阻止默认处理
});
// 处理全局错误
window.onerror = function(message, source, lineno, colno, error) {
console.error('全局错误:', {
message,
source,
lineno,
colno,
error
});
return true; // 返回 true 防止默认处理
};
- 自定义错误类
javascript
class CustomError extends Error {
constructor(message) {
super(message);
this.name = 'CustomError';
}
}
try {
throw new CustomError('这是一个自定义错误');
} catch (error) {
if (error instanceof CustomError) {
console.error('捕获到自定义错误:', error.message);
} else {
console.error('捕获到其他错误:', error);
}
}
- React 错误边界
jsx
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error('组件错误:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>出现错误了</h1>;
}
return this.props.children;
}
}
// 使用方式
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
- Axios 拦截器处理网络请求错误
javascript
// 添加响应拦截器
axios.interceptors.response.use(
response => response,
error => {
if (error.response) {
// 服务器返回错误状态码
switch (error.response.status) {
case 404:
console.error('请求的资源不存在');
break;
case 500:
console.error('服务器错误');
break;
default:
console.error('其他错误');
}
} else if (error.request) {
// 请求发出但没有收到响应
console.error('网络错误');
} else {
// 请求配置出错
console.error('请求配置错误:', error.message);
}
return Promise.reject(error);
}
);