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;


