错误处理场景

错误处理是前端开发中的重要环节，它直接影响用户体验和应用的稳定性。本文件将详细介绍前端错误处理的常见场景和解决方案，帮助你提高前端应用的可靠性。

核心概念

错误类型

1. 语法错误：

   • 代码语法不符合JavaScript语法规则
   • 例如：缺少括号、变量名错误等
   • 发生在代码解析阶段，会导致脚本停止执行

2. 运行时错误：

   • 代码语法正确，但在运行时发生错误
   • 例如：引用不存在的变量、调用不存在的方法等
   • 发生在代码执行阶段，会导致当前代码块停止执行

3. 逻辑错误：

   • 代码语法和运行时都正确，但逻辑不符合预期
   • 例如：算法错误、条件判断错误等
   • 不会导致代码停止执行，但会产生错误的结果

4. 网络错误：

   • 网络请求失败或响应异常
   • 例如：服务器错误、网络中断、超时等
   • 发生在网络请求过程中

5. Promise错误：

   • Promise被拒绝（rejected）
   • 例如：异步操作失败、Promise链中的错误等
   • 发生在异步操作过程中

错误处理机制

1. try-catch：

   • 捕获和处理同步代码中的错误
   • 不能捕获异步代码中的错误（除非在异步回调中使用）

2. Promise.catch：

   • 捕获和处理Promise链中的错误
   • 可以捕获异步操作中的错误

3. async-await + try-catch：

   • 结合async-await和try-catch处理异步错误
   • 使异步错误处理更像同步错误处理

4. 事件监听器：

   • 监听全局错误事件（window.onerror）
   • 监听未捕获的Promise错误（window.onunhandledrejection）

5. 错误边界：

   • React中的错误边界（Error Boundaries）
   • 捕获和处理组件树中的错误

常见错误处理场景

1. 网络请求错误

场景描述：前端应用向服务器发送网络请求时，可能会遇到各种错误，如服务器错误、网络中断、超时等。

原因分析：

• 服务器内部错误（500）
• 请求参数错误（400）
• 未授权访问（401）
• 资源不存在（404）
• 网络连接中断
• 请求超时

解决方案：

1. 使用Axios的错误处理：

   • 拦截器统一处理错误
   • 区分网络错误和HTTP错误
   • 重试机制

2. 使用Fetch API的错误处理：

   • 检查响应状态
   • 处理网络错误
   • 处理JSON解析错误

3. 全局错误处理：

   • 封装API请求函数
   • 统一处理错误类型
   • 显示友好的错误提示

代码示例：

// 使用Axios的错误处理
import axios from 'axios';

// 创建axios实例
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

// 请求拦截器
api.interceptors.request.use(
  config => {
    // 可以在这里添加认证信息等
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
api.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    // 处理错误
    if (error.response) {
      // HTTP错误
      switch (error.response.status) {
        case 400:
          console.error('请求参数错误:', error.response.data);
          break;
        case 401:
          console.error('未授权访问:', error.response.data);
          // 可以在这里跳转到登录页
          break;
        case 404:
          console.error('资源不存在:', error.response.data);
          break;
        case 500:
          console.error('服务器内部错误:', error.response.data);
          break;
        default:
          console.error('HTTP错误:', error.response.data);
      }
    } else if (error.request) {
      // 网络错误
      console.error('网络错误:', error.request);
    } else {
      // 其他错误
      console.error('错误:', error.message);
    }
    return Promise.reject(error);
  }
);

// 使用封装的API函数
async function fetchData() {
  try {
    const data = await api.get('/data');
    console.log('获取数据成功:', data);
    return data;
  } catch (error) {
    console.error('获取数据失败:', error);
    // 显示错误提示
    showError('获取数据失败，请稍后重试');
    return null;
  }
}

// 使用Fetch API的错误处理
async function fetchDataWithFetch() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      // 检查响应状态
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('获取数据成功:', data);
    return data;
  } catch (error) {
    console.error('获取数据失败:', error);
    // 显示错误提示
    showError('获取数据失败，请稍后重试');
    return null;
  }
}

2. 异步操作错误

场景描述：前端应用中存在大量异步操作，如网络请求、定时器、事件回调等，这些操作中的错误如果处理不当，可能会导致应用崩溃或行为异常。

原因分析：

• 异步回调中的错误未被捕获
• Promise链中的错误未被处理
• async-await中的错误未被捕获

解决方案：

1. Promise错误处理：

   • 使用.catch()捕获错误
   • 确保Promise链中的每个错误都被处理

2. async-await错误处理：

   • 使用try-catch捕获错误
   • 确保每个async函数中的错误都被处理

3. 事件回调错误处理：

   • 在事件回调中使用try-catch捕获错误
   • 避免在事件回调中使用未处理的Promise

代码示例：

// Promise错误处理
function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      console.log('获取数据成功:', data);
      return data;
    })
    .catch(error => {
      console.error('获取数据失败:', error);
      // 显示错误提示
      showError('获取数据失败，请稍后重试');
      return null;
    });
}

// async-await错误处理
async function fetchDataAsync() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('获取数据成功:', data);
    return data;
  } catch (error) {
    console.error('获取数据失败:', error);
    // 显示错误提示
    showError('获取数据失败，请稍后重试');
    return null;
  }
}

// 事件回调错误处理
function setupEventListeners() {
  const button = document.getElementById('button');
  button.addEventListener('click', async function() {
    try {
      // 异步操作
      const data = await fetchDataAsync();
      // 处理数据
      processData(data);
    } catch (error) {
      console.error('点击处理失败:', error);
      // 显示错误提示
      showError('操作失败，请稍后重试');
    }
  });
}

// 处理数据的函数
function processData(data) {
  if (!data) {
    throw new Error('数据为空');
  }
  // 处理数据
  console.log('处理数据:', data);
}

3. 表单验证错误

场景描述：用户提交表单时，需要验证表单数据的合法性，如果验证失败，需要显示友好的错误提示。

原因分析：

• 表单字段为空
• 输入格式不符合要求（如邮箱、手机号）
• 输入长度不符合要求
• 两次输入不一致（如密码确认）

解决方案：

1. 客户端表单验证：

   • HTML5表单验证
   • 自定义验证规则
   • 实时验证和提交时验证

2. 服务端表单验证：

   • 服务端验证数据
   • 返回详细的错误信息
   • 前端显示服务端返回的错误

3. 表单验证库：

   • 使用第三方表单验证库（如Yup、VeeValidate、Formik）
   • 简化表单验证逻辑

代码示例：

// 自定义表单验证
function validateForm(formData) {
  const errors = {};
  
  // 验证用户名
  if (!formData.username) {
    errors.username = '用户名不能为空';
  } else if (formData.username.length < 3) {
    errors.username = '用户名长度不能少于3个字符';
  }
  
  // 验证邮箱
  if (!formData.email) {
    errors.email = '邮箱不能为空';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
    errors.email = '邮箱格式不正确';
  }
  
  // 验证密码
  if (!formData.password) {
    errors.password = '密码不能为空';
  } else if (formData.password.length < 6) {
    errors.password = '密码长度不能少于6个字符';
  }
  
  // 验证确认密码
  if (!formData.confirmPassword) {
    errors.confirmPassword = '确认密码不能为空';
  } else if (formData.password !== formData.confirmPassword) {
    errors.confirmPassword = '两次输入的密码不一致';
  }
  
  return {
    isValid: Object.keys(errors).length === 0,
    errors
  };
}

// 表单提交处理
async function handleSubmit(e) {
  e.preventDefault();
  
  const formData = {
    username: document.getElementById('username').value,
    email: document.getElementById('email').value,
    password: document.getElementById('password').value,
    confirmPassword: document.getElementById('confirmPassword').value
  };
  
  // 客户端验证
  const validation = validateForm(formData);
  if (!validation.isValid) {
    // 显示客户端验证错误
    displayErrors(validation.errors);
    return;
  }
  
  try {
    // 提交表单数据到服务器
    const response = await fetch('https://api.example.com/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    });
    
    if (!response.ok) {
      // 服务器验证失败
      const errorData = await response.json();
      // 显示服务器验证错误
      displayErrors(errorData.errors);
      return;
    }
    
    // 注册成功
    const data = await response.json();
    console.log('注册成功:', data);
    // 跳转到登录页或其他页面
    window.location.href = '/login';
  } catch (error) {
    console.error('注册失败:', error);
    // 显示网络错误
    showError('注册失败，请稍后重试');
  }
}

// 显示错误信息
function displayErrors(errors) {
  // 清除之前的错误信息
  document.querySelectorAll('.error-message').forEach(el => el.remove());
  
  // 显示新的错误信息
  Object.keys(errors).forEach(field => {
    const errorElement = document.createElement('div');
    errorElement.className = 'error-message';
    errorElement.textContent = errors[field];
    
    const fieldElement = document.getElementById(field);
    if (fieldElement) {
      fieldElement.parentNode.appendChild(errorElement);
    }
  });
}

// 实时验证
function setupRealTimeValidation() {
  const formFields = ['username', 'email', 'password', 'confirmPassword'];
  
  formFields.forEach(field => {
    const element = document.getElementById(field);
    if (element) {
      element.addEventListener('input', function() {
        const formData = {
          [field]: this.value
        };
        
        // 简单验证当前字段
        const validation = validateForm(formData);
        if (validation.errors[field]) {
          // 显示错误信息
          const errorElement = document.createElement('div');
          errorElement.className = 'error-message';
          errorElement.textContent = validation.errors[field];
          
          // 清除之前的错误信息
          const existingError = this.parentNode.querySelector('.error-message');
          if (existingError) {
            existingError.remove();
          }
          
          this.parentNode.appendChild(errorElement);
        } else {
          // 清除错误信息
          const existingError = this.parentNode.querySelector('.error-message');
          if (existingError) {
            existingError.remove();
          }
        }
      });
    }
  });
}

4. 全局错误处理

场景描述：前端应用中可能会出现未被捕获的错误，这些错误如果不处理，可能会导致应用崩溃或行为异常。

原因分析：

• 同步代码中的错误未被try-catch捕获
• 异步代码中的错误未被Promise.catch或try-catch捕获
• 第三方库中的错误

解决方案：

1. 全局错误事件监听：

   • 监听window.onerror事件捕获同步错误
   • 监听window.onunhandledrejection事件捕获未处理的Promise错误

2. 错误监控系统：

   • 集成第三方错误监控服务（如Sentry、Bugsnag）
   • 收集和分析错误数据
   • 及时发现和修复错误

3. React错误边界：

   • 使用React的错误边界捕获组件树中的错误
   • 防止整个应用崩溃

代码示例：

// 全局错误事件监听
function setupGlobalErrorHandlers() {
  // 捕获同步错误
  window.onerror = function(message, source, lineno, colno, error) {
    console.error('全局错误:', { message, source, lineno, colno, error });
    // 上报错误到监控系统
    reportError(error, {
      message,
      source,
      lineno,
      colno
    });
    // 显示错误提示
    showError('应用发生错误，请刷新页面重试');
    // 返回true表示错误已处理
    return true;
  };
  
  // 捕获未处理的Promise错误
  window.onunhandledrejection = function(event) {
    console.error('未处理的Promise错误:', event.reason);
    // 上报错误到监控系统
    reportError(event.reason, {
      type: 'unhandledrejection'
    });
    // 显示错误提示
    showError('操作失败，请稍后重试');
    // 防止默认行为
    event.preventDefault();
  };
}

// 上报错误到监控系统
function reportError(error, context) {
  // 这里可以集成Sentry、Bugsnag等错误监控服务
  console.log('上报错误:', error, context);
  
  // 示例：使用Sentry
  // if (window.Sentry) {
  //   window.Sentry.captureException(error, {
  //     extra: context
  //   });
  // }
}

// React错误边界
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  
  static getDerivedStateFromError(error) {
    // 更新状态，下次渲染时显示降级UI
    return { hasError: true, error };
  }
  
  componentDidCatch(error, errorInfo) {
    // 捕获错误信息
    console.error('组件错误:', error, errorInfo);
    // 上报错误到监控系统
    reportError(error, {
      type: 'react-error',
      componentStack: errorInfo.componentStack
    });
  }
  
  render() {
    if (this.state.hasError) {
      // 显示降级UI
      return (
        <div className="error-boundary">
          <h2>出错了</h2>
          <p>很抱歉，该组件发生了错误。</p>
          <button onClick={() => this.setState({ hasError: false })}>
            重试
          </button>
        </div>
      );
    }
    
    // 正常渲染子组件
    return this.props.children;
  }
}

// 使用错误边界
function App() {
  return (
    <ErrorBoundary>
      <div>
        <h1>我的应用</h1>
        <SomeComponent />
      </div>
    </ErrorBoundary>
  );
}

// 可能会出错的组件
function SomeComponent() {
  if (Math.random() > 0.5) {
    throw new Error('随机错误');
  }
  return <div>Hello World</div>;
}

5. 第三方库错误

场景描述：前端应用中使用了大量第三方库，这些库可能会出现错误，影响应用的正常运行。

原因分析：

• 第三方库版本不兼容
• 第三方库使用方式错误
• 第三方库本身存在bug
• 第三方库依赖的其他库出现错误

解决方案：

1. 版本管理：

   • 锁定第三方库版本（package-lock.json或yarn.lock）
   • 定期更新第三方库到稳定版本
   • 测试不同版本的兼容性

2. 使用方式检查：

   • 仔细阅读第三方库的文档
   • 确保使用方式正确
   • 检查参数类型和格式

3. 错误捕获和处理：

   • 对第三方库的调用进行错误捕获
   • 处理第三方库可能抛出的错误
   • 提供降级方案

4. 替代方案：

   • 寻找功能相似的其他库
   • 考虑自行实现部分功能

代码示例：

// 第三方库错误处理
import * as ThirdPartyLib from 'third-party-lib';

// 安全调用第三方库函数
function safeCallThirdPartyFunction(data) {
  try {
    // 检查参数
    if (!data || typeof data !== 'object') {
      throw new Error('参数错误');
    }
    
    // 调用第三方库函数
    const result = ThirdPartyLib.someFunction(data);
    return result;
  } catch (error) {
    console.error('第三方库错误:', error);
    // 上报错误到监控系统
    reportError(error, {
      library: 'third-party-lib',
      function: 'someFunction'
    });
    // 提供降级方案
    return getDefaultValue();
  }
}

// 获取默认值
function getDefaultValue() {
  return {
    // 默认值
  };
}

// 初始化第三方库
function initThirdPartyLib() {
  try {
    // 初始化第三方库
    ThirdPartyLib.init({
      // 配置参数
    });
    console.log('第三方库初始化成功');
  } catch (error) {
    console.error('第三方库初始化失败:', error);
    // 上报错误到监控系统
    reportError(error, {
      library: 'third-party-lib',
      function: 'init'
    });
    // 提供降级方案
    setupFallback();
  }
}

// 降级方案
function setupFallback() {
  console.log('使用降级方案');
  // 实现替代功能
}

错误处理最佳实践

1. 错误处理原则

1. 尽早捕获：在错误发生的最早阶段捕获错误
2. 妥善处理：对错误进行适当的处理，避免错误向上传播
3. 提供反馈：向用户显示友好的错误提示
4. 记录错误：记录错误信息，便于调试和分析
5. 提供降级：在错误发生时提供合理的降级方案
6. 保持应用稳定：即使发生错误，也要保持应用的基本功能可用

2. 错误提示设计

1. 用户友好：使用通俗易懂的语言，避免技术术语
2. 具体明确：说明错误的具体原因和解决方案
3. 及时反馈：在错误发生后立即显示错误提示
4. 视觉一致性：错误提示的样式与应用整体风格一致
5. 可操作：提供明确的操作选项（如重试、返回）

3. 错误监控和分析

1. 集成错误监控服务：使用Sentry、Bugsnag等第三方错误监控服务
2. 自定义错误监控：实现自定义的错误监控系统
3. 错误分类：对错误进行分类，便于分析和统计
4. 错误趋势分析：分析错误发生的趋势，及时发现和解决问题
5. 错误优先级：根据错误的严重程度和发生频率设置优先级

4. 错误预防

1. 代码审查：定期进行代码审查，发现和修复潜在的错误
2. 单元测试：编写单元测试，确保代码的正确性
3. 集成测试：编写集成测试，确保组件和模块之间的交互正确
4. 类型检查：使用TypeScript等静态类型检查工具，减少类型错误
5. 代码规范：遵循代码规范，减少语法错误和逻辑错误

面试常见问题

1. 如何处理前端的错误？

答案示例： 前端错误处理可以从以下几个方面入手：

1. 同步错误处理：使用try-catch捕获和处理同步代码中的错误。

2. 异步错误处理：

   • 使用Promise.catch()捕获Promise链中的错误
   • 使用async-await结合try-catch处理异步错误
   • 在事件回调中使用try-catch捕获错误

3. 网络错误处理：

   • 使用Axios的拦截器统一处理网络错误
   • 使用Fetch API的错误处理机制
   • 区分网络错误和HTTP错误

4. 全局错误处理：

   • 监听window.onerror事件捕获同步错误
   • 监听window.onunhandledrejection事件捕获未处理的Promise错误
   • 使用React的错误边界捕获组件树中的错误

5. 错误监控：

   • 集成第三方错误监控服务（如Sentry、Bugsnag）
   • 收集和分析错误数据
   • 及时发现和修复错误

6. 错误提示：

   • 向用户显示友好的错误提示
   • 提供明确的操作选项
   • 保持应用的基本功能可用

2. 如何处理Promise中的错误？

答案示例： 处理Promise中的错误有以下几种方法：

1. 使用.catch()方法：在Promise链的末尾添加.catch()方法，捕获前面所有Promise中的错误。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
    console.error('请求失败:', error);
  });

2. 使用async-await和try-catch：将Promise链式调用转换为async-await，使用try-catch捕获错误。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    // 处理数据
  } catch (error) {
    // 处理错误
    console.error('请求失败:', error);
  }
}

3. Promise.all中的错误处理：使用Promise.all处理多个Promise时，如果其中一个Promise失败，整个Promise.all会失败，需要使用catch捕获错误。

Promise.all([
  fetch('https://api.example.com/data1'),
  fetch('https://api.example.com/data2')
])
  .then(responses => Promise.all(responses.map(r => r.json())))
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
    console.error('请求失败:', error);
  });

4. Promise.race中的错误处理：使用Promise.race处理多个Promise时，如果其中一个Promise失败，整个Promise.race会失败，需要使用catch捕获错误。

Promise.race([
  fetch('https://api.example.com/data'),
  new Promise((_, reject) => setTimeout(() => reject(new Error('超时')), 5000))
])
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
    console.error('请求失败:', error);
  });

3. 如何处理React中的错误？

答案示例： 处理React中的错误有以下几种方法：

1. 错误边界（Error Boundaries）：React 16引入了错误边界，用于捕获和处理组件树中的错误，防止整个应用崩溃。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  
  static getDerivedStateFromError(error) {
    // 更新状态，下次渲染时显示降级UI
    return { hasError: true };
  }
  
  componentDidCatch(error, errorInfo) {
    // 捕获错误信息
    console.error('组件错误:', error, errorInfo);
    // 上报错误到监控系统
  }
  
  render() {
    if (this.state.hasError) {
      // 显示降级UI
      return <div>出错了，请刷新页面重试</div>;
    }
    
    // 正常渲染子组件
    return this.props.children;
  }
}

// 使用错误边界
function App() {
  return (
    <ErrorBoundary>
      <SomeComponent />
    </ErrorBoundary>
  );
}

2. try-catch：在事件处理函数、生命周期方法等同步代码中使用try-catch捕获错误。

function MyComponent() {
  const handleClick = () => {
    try {
      // 可能会出错的代码
    } catch (error) {
      console.error('点击处理错误:', error);
      // 处理错误
    }
  };
  
  return (
    <button onClick={handleClick}>点击</button>
  );
}

3. 异步错误处理：在异步操作（如网络请求）中使用Promise.catch或async-await + try-catch捕获错误。

function MyComponent() {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);
  
  React.useEffect(() => {
    fetchData();
  }, []);
  
  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      setData(data);
    } catch (error) {
      console.error('获取数据错误:', error);
      setError('获取数据失败，请稍后重试');
    }
  };
  
  if (error) {
    return <div>{error}</div>;
  }
  
  return (
    <div>{data ? data.message : '加载中...'}</div>
  );
}

4. 全局错误处理：监听window.onerror和window.onunhandledrejection事件，捕获全局错误。

window.onerror = function(message, source, lineno, colno, error) {
  console.error('全局错误:', error);
  // 上报错误到监控系统
  return true;
};

window.onunhandledrejection = function(event) {
  console.error('未处理的Promise错误:', event.reason);
  // 上报错误到监控系统
  event.preventDefault();
};

4. 如何设计一个错误监控系统？

答案示例： 设计一个错误监控系统需要考虑以下几个方面：

1. 错误捕获：

   • 捕获同步错误（window.onerror）
   • 捕获未处理的Promise错误（window.onunhandledrejection）
   • 捕获React组件错误（错误边界）
   • 捕获网络请求错误（Axios拦截器）

2. 错误上报：

   • 批量上报：减少网络请求次数
   • 防抖上报：避免短时间内上报大量错误
   • 错误去重：避免重复上报相同的错误
   • 优先级上报：优先上报严重错误

3. 错误数据：

   • 错误信息：错误消息、堆栈跟踪
   • 上下文信息：用户代理、URL、时间戳
   • 用户行为：错误发生前的用户操作
   • 环境信息：浏览器版本、操作系统、网络状态

4. 错误分析：

   • 错误分类：按错误类型、错误来源分类
   • 错误趋势：分析错误发生的频率和趋势
   • 错误分布：分析错误在不同页面、不同浏览器中的分布
   • 错误关联：分析错误之间的关联关系

5. 错误告警：

   • 阈值告警：当错误率超过阈值时告警
   • 新错误告警：当出现新错误时告警
   • 严重错误告警：当出现严重错误时告警

6. 错误管理：

   • 错误状态：未处理、处理中、已处理
   • 错误分配：将错误分配给相应的开发人员
   • 错误跟踪：跟踪错误的处理进度
   • 错误统计：统计错误的处理时间和成功率

7. 集成方式：

   • 浏览器端集成：通过脚本标签或npm包集成
   • 框架集成：与React、Vue等框架集成
   • 构建工具集成：与Webpack、Vite等构建工具集成

8. 性能考虑：

   • 最小化监控脚本的体积
   • 减少监控对应用性能的影响
   • 优化错误上报的网络传输

5. 如何处理网络请求超时？

答案示例： 处理网络请求超时可以从以下几个方面入手：

1. 设置请求超时时间：

   • 使用Axios的timeout配置
   • 使用Fetch API的AbortController
   • 使用XMLHttpRequest的timeout属性

2. 超时错误处理：

   • 捕获超时错误
   • 显示友好的超时提示
   • 提供重试选项

3. 超时重试机制：

   • 自动重试一定次数
   • 指数退避策略（每次重试间隔递增）
   • 避免无限重试

4. 用户体验优化：

   • 显示加载指示器
   • 提供取消操作
   • 预估剩余时间

代码示例：

// 使用Axios设置超时和重试
import axios from 'axios';

// 创建axios实例
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000, // 10秒超时
});

// 重试拦截器
api.interceptors.response.use(
  response => response,
  error => {
    const originalRequest = error.config;
    
    // 检查是否是超时错误，并且没有超过重试次数
    if (error.code === 'ECONNABORTED' && !originalRequest._retryCount) {
      originalRequest._retryCount = 1;
      // 重试请求
      return api(originalRequest);
    }
    
    // 检查是否是超时错误，并且重试次数小于3
    if (error.code === 'ECONNABORTED' && originalRequest._retryCount < 3) {
      originalRequest._retryCount += 1;
      // 指数退避策略
      const delay = Math.pow(2, originalRequest._retryCount) * 1000;
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(api(originalRequest));
        }, delay);
      });
    }
    
    return Promise.reject(error);
  }
);

// 使用Fetch API设置超时
function fetchWithTimeout(url, options = {}, timeout = 10000) {
  return new Promise((resolve, reject) => {
    // 创建AbortController
    const controller = new AbortController();
    const { signal } = controller;
    
    // 设置超时
    const timeoutId = setTimeout(() => {
      controller.abort();
      reject(new Error('请求超时'));
    }, timeout);
    
    // 发送请求
    fetch(url, {
      ...options,
      signal
    })
      .then(response => {
        clearTimeout(timeoutId);
        resolve(response);
      })
      .catch(error => {
        clearTimeout(timeoutId);
        reject(error);
      });
  });
}

// 使用示例
async function fetchData() {
  try {
    const response = await fetchWithTimeout('https://api.example.com/data');
    const data = await response.json();
    console.log('获取数据成功:', data);
    return data;
  } catch (error) {
    if (error.name === 'AbortError' || error.message === '请求超时') {
      console.error('请求超时:', error);
      // 显示超时提示
      showError('请求超时，请检查网络连接');
    } else {
      console.error('获取数据失败:', error);
      // 显示其他错误提示
      showError('获取数据失败，请稍后重试');
    }
    return null;
  }
}

总结

错误处理是前端开发中的重要环节，它直接影响用户体验和应用的稳定性。本文件详细介绍了前端错误处理的常见场景和解决方案，包括网络请求错误、异步操作错误、表单验证错误、全局错误处理和第三方库错误等。

通过学习和实践这些错误处理方法，你将能够提高前端应用的可靠性，减少用户遇到的错误，改善用户体验。同时，错误处理也是前端面试中的常见话题，掌握错误处理的核心概念和解决方案，对于通过前端面试至关重要。

在实际开发中，你应该根据具体的应用场景选择合适的错误处理方法，并建立完善的错误监控系统，及时发现和修复错误，不断提高应用的质量和稳定性。