Skip to content

常见错误拦截

在 JavaScript 中有多种方式可以拦截和处理错误。错误类型可以参考 错误处理机制

这边介绍几种主要的拦截方法:

  1. try...catch 语句
javascript
try {
  // 可能会抛出错误的代码
  throw new Error('发生了一个错误');
} catch (error) {
  // 处理错误
  console.error('捕获到错误:', error.message);
} finally {
  // 无论是否发生错误都会执行的代码
  console.log('清理工作');
}
  1. 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);
  }
}
  1. 全局错误处理
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 防止默认处理
};
  1. 自定义错误类
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);
  }
}
  1. 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>
  1. 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);
  }
);