axios 中如何进行错误处理？请详细说明错误类型和处理策略 - 面试题

Axios 错误类型

Axios 请求可能产生的错误主要分为以下几类：

1. 请求配置错误

URL 格式错误
请求方法错误
配置参数错误

2. 网络错误

无网络连接
请求超时
DNS 解析失败
CORS 跨域错误

3. HTTP 错误状态码

4xx 客户端错误（400, 401, 403, 404 等）
5xx 服务器错误（500, 502, 503 等）

4. 请求取消错误

主动取消请求
组件卸载时取消

错误对象结构

当请求失败时，Axios 会返回一个包含以下属性的错误对象：

javascript
try {
  await axios.get('/api/data');
} catch (error) {
  console.log(error.message);      // 错误信息
  console.log(error.response);     // 服务器响应（如果有）
  console.log(error.request);      // 请求对象
  console.log(error.config);       // 请求配置
  console.log(error.code);         // 错误代码
}

错误处理策略

1. 基础错误处理

javascript
axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了错误状态码
      console.log('Status:', error.response.status);
      console.log('Data:', error.response.data);
    } else if (error.request) {
      // 请求已发送但没有收到响应
      console.log('No response received');
    } else {
      // 请求配置出错
      console.log('Error:', error.message);
    }
  });

2. 使用 async/await 处理错误

javascript
async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    return response.data;
  } catch (error) {
    handleAxiosError(error);
  }
}

function handleAxiosError(error) {
  if (error.response) {
    // 服务器响应错误
    const { status, data } = error.response;
    
    switch (status) {
      case 400:
        throw new Error(`请求参数错误: ${data.message}`);
      case 401:
        // 清除登录状态并跳转
        logout();
        throw new Error('登录已过期，请重新登录');
      case 403:
        throw new Error('没有权限执行此操作');
      case 404:
        throw new Error('请求的资源不存在');
      case 422:
        throw new Error(`数据验证失败: ${data.message}`);
      case 500:
        throw new Error('服务器内部错误，请稍后重试');
      case 502:
        throw new Error('网关错误');
      case 503:
        throw new Error('服务暂时不可用');
      default:
        throw new Error(data.message || '请求失败');
    }
  } else if (error.request) {
    // 网络错误
    if (error.code === 'ECONNABORTED') {
      throw new Error('请求超时，请检查网络连接');
    }
    if (error.code === 'ERR_NETWORK') {
      throw new Error('网络错误，请检查网络连接');
    }
    throw new Error('无法连接到服务器');
  } else {
    // 其他错误
    throw new Error(error.message);
  }
}

3. 全局错误处理（通过拦截器）

javascript
// 创建 axios 实例
const instance = axios.create({
  timeout: 10000
});

// 响应拦截器统一处理错误
instance.interceptors.response.use(
  response => response,
  error => {
    // 统一错误处理
    const errorMessage = getErrorMessage(error);
    
    // 显示错误提示
    message.error(errorMessage);
    
    // 记录错误日志
    logError(error);
    
    return Promise.reject(error);
  }
);

function getErrorMessage(error) {
  if (error.response) {
    const { status, data } = error.response;
    const messageMap = {
      400: '请求参数错误',
      401: '登录已过期',
      403: '没有权限',
      404: '资源不存在',
      500: '服务器错误',
      502: '网关错误',
      503: '服务不可用'
    };
    return data.message || messageMap[status] || '请求失败';
  }
  
  if (error.request) {
    return '网络连接失败，请检查网络';
  }
  
  return error.message || '未知错误';
}

4. 超时错误处理

javascript
const instance = axios.create({
  timeout: 5000, // 5秒超时
  timeoutErrorMessage: '请求超时，请稍后重试'
});

// 或者自定义超时处理
instance.interceptors.response.use(
  response => response,
  error => {
    if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
      // 超时错误特殊处理
      return Promise.reject(new Error('请求响应时间过长，请稍后重试'));
    }
    return Promise.reject(error);
  }
);

5. 重试机制

javascript
axios.interceptors.response.use(null, async (error) => {
  const { config } = error;
  
  // 设置重试次数
  if (!config || !config.retry) {
    return Promise.reject(error);
  }
  
  config.retryCount = config.retryCount || 0;
  
  if (config.retryCount >= config.retry) {
    return Promise.reject(error);
  }
  
  config.retryCount += 1;
  
  // 延迟重试
  const delayRetry = new Promise(resolve => {
    setTimeout(resolve, config.retryDelay || 1000);
  });
  
  await delayRetry;
  return axios(config);
});

// 使用
axios.get('/api/data', {
  retry: 3,
  retryDelay: 2000
});

6. 请求取消错误处理

javascript
const controller = new AbortController();

try {
  const response = await axios.get('/api/data', {
    signal: controller.signal
  });
} catch (error) {
  if (axios.isCancel(error)) {
    console.log('请求被取消:', error.message);
  } else {
    // 处理其他错误
    console.error('请求失败:', error);
  }
}

// 取消请求
controller.abort('用户取消操作');

最佳实践

分层处理：全局拦截器 + 业务层处理
用户友好：错误信息要清晰易懂
错误分类：区分可恢复和不可恢复错误
日志记录：记录错误便于排查问题
降级策略：网络错误时提供缓存数据或默认数据

错误处理流程图

shell
请求失败
    ↓
检查 error.response
    ↓
存在 → HTTP 错误 → 根据状态码处理
    ↓
不存在 → 检查 error.request
    ↓
存在 → 网络错误 → 提示用户检查网络
    ↓
不存在 → 配置错误 → 检查代码