JavaScript网络请求_Axios拦截器与错误处理

通过Axios拦截器可统一处理请求和响应，如添加认证头、处理401错误跳转登录页，并结合自定义实例封装提升代码可维护性。

Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 中发起网络请求。在实际开发中，我们经常需要统一处理请求和响应，以及网络异常或后端返回的错误信息。通过 Axios 提供的拦截器机制和完善的错误处理策略，可以有效提升代码的可维护性和用户体验。

使用拦截器统一处理请求与响应

拦截器允许我们在请求发送前或响应返回后进行一些通用操作，比如添加认证头、设置加载状态、日志记录等。

请求拦截器

常用于添加身份验证 token、设置默认请求头、显示 loading 动画等：

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 可以在此处开启 loading
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
  

响应拦截器

可用于统一处理响应数据、关闭 loading、处理特定状态码（如 401 未授权）：

axios.interceptors.response.use(
  response => {
    // 直接返回响应数据，简化调用层处理
    return response.data;
  },
  error => {
    // 在此处统一处理错误
    return Promise.reject(error);
  }
);
  

全面的错误处理机制

Axios 的错误可能是网络问题、超时、服务器异常或业务逻辑错误。我们需要区分不同类型的错误并做出相应处理。

判断错误类型

通过检查 error 对象的属性，可以识别错误来源：

• error.response：存在说明服务器已响应，但状态码不在 2xx 范围，例如 400、401、500
• error.request：存在但无响应，通常是网络中断或服务器无响应
• error.message 或配置问题，如超时、取消请求等

示例：在拦截器中处理常见错误

axios.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    if (error.response) {
      // 服务器返回了错误状态码
      switch (error.response.status) {
        case 401:
          // 通常表示登录过期，跳转到登录页
          window.location.href = '/login';
          break;
        case 403:
          alert('权限不足');
          break;
        case 500:
          alert('服务器内部错误，请稍后再试');
          break;
        default:
          alert(`请求失败：${error.response.data.message || '未知错误'}`);
      }
    } else if (error.request) {
      // 网络异常，如断网、服务不可达
      alert('网络连接失败，请检查网络');
    } else {
      // 其他错误，如设置请求时出错
      console.error('请求配置异常:', error.message);
    }

    // 将错误继续抛出，便于调用层捕获
    return Promise.reject(error);
  }
);
  

实际使用中的建议

为了提高灵活性和复用性，建议将拦截器和实例封装在一起，避免污染全局 axios。

创建自定义实例：

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

// 添加该实例的拦截器
api.interceptors.request.use( ... );
api.interceptors.response.use( ... );

export default api;
  

在组件中直接使用：

api.get('/user/profile')
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    // 仍可捕获特殊场景下的错误
  });
  

基本上就这些。合理使用拦截器和错误处理，能让网络请求更健壮、代码更清晰。