Axios 错误处理进阶封装：实现网络层数据与状态解耦

Axios 错误处理进阶封装：实现网络层数据与状态解耦

在前端项目中，网络请求失败不是异常，而是常态。真正拉开项目工程质量差距的，往往不是会不会用 axios，而是如何设计一套可维护、可扩展、可协作的网络错误处理体系。成熟的项目组有现成可用的 axios 网络封装设计，而不成熟的项目组网络错误处理原始而杂乱。很多开发者即便在成熟项目组工作多年，依然只停留在'知道有拦截器'却不知如何设计的阶段。

本文围绕 Axios 的拦截器机制，系统性分析可配置、可分级、可扩展的网络请求实战封装策略。

为什么网络错误处理一定要下沉到 Axios 层

如果在业务层直接处理常规错误，每个 async/await 都要包裹一段 try-catch。同一种错误（如 token 过期）会被重复处理 N 次，UI 提示风格也难以统一，后续想要改动逻辑极其痛苦。

// 典型的业务层污染示例
async function loadList() {
  try {
    const res = await getList();
    list.value = res.data;
  } catch (e) {
    ElMessage.error('请求失败');
  }
}

这显然是不可取的。对于网络错误的判断逻辑、分类、兜底策略，本就应该属于请求基础设施层。将错误分级并合并统一处理，才能让业务代码保持纯净。

Axios 拦截器 Interceptors

Axios 提供了两个关键拦截器：请求拦截器和响应拦截器，它们可以用来行使不同的职责。

1. 拦截器的基础应用

网络请求的失败通常分为两大类：其一是 HTTP/网络层错误，比如断网、请求超时、上游错误（500/502/503）等；其二是业务层错误，比如 code !== 0（响应状态码是 200，但业务状态异常）、token 过期、权限问题等。

我们需要创建一个 axios 实例，并在其中配置拦截器。

// src/utils/api.js
import axios from 'axios';
import { ElMessage } from 'element-plus';

// 创建 axios 实例
const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL || ,
  : ,
});


request...(
   {
    
     token = .();
     (token) {
      config.. = ;
    }
     config;
  },
   {
     .(error);
  }
);


request...(
   {
     { code, message, data } = response.;
     (code !== ) {
       .({ : , code, message });
    }
     data;
  },
   {
     { response } = error;
     (response) {
      
       (response.) {
         :
          .();
          ;
         :
          .();
          
          
          ;
         :
          .();
          ;
         :
          .();
          ;
         :
          .();
          ;
        :
          .();
      }
    }   (error.) {
      
      .();
    }  {
      
      .();
    }
     .(error);
  }
);

  request;