import axios from "axios";
import { ElMessage } from "element-plus";
import store from "@/store";
import router from "@/router";// 创建axios实例
const service = axios.create({baseURL: "http://localhost:8080/api", // 后端地址timeout: 5000,
});// 请求拦截器
service.interceptors.request.use((config) => {// 如果有token，添加到请求头if (store.getters.token) {config.headers["Authorization"] = "Bearer " + store.getters.token;}return config;},(error) => {console.log(error);return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((response) => {// 如果是blob类型的响应（文件下载），直接返回if (response.config.responseType === 'blob') {return response.data;}// 如果响应的Content-Type是text/csv，也直接返回const contentType = response.headers['content-type'];if (contentType && contentType.includes('text/csv')) {return response.data;}const res = response.data;// 如果code不是200，说明出错了if (res.code !== 200) {ElMessage({message: res.message || "请求失败",type: "error",duration: 5 * 1000,});// 401: 未登录if (res.code === 401) {store.dispatch("user/logout");router.push("/login");}return Promise.reject(new Error(res.message || "请求失败"));} else {return res;}},(error) => {console.log("err" + error);ElMessage({message: error.message,type: "error",duration: 5 * 1000,});return Promise.reject(error);}
);export default service;

基于 Axios 的 HTTP 请求封装文件，提供了完整的请求/响应拦截、错误处理和认证机制。

1. 依赖导入

import axios from "axios";
import { ElMessage } from "element-plus";
import store from "@/store";
import router from "@/router";

• axios：HTTP 请求库
• ElMessage：ElementPlus 的消息提示组件
• store：Vuex 状态管理器，用于获取用户 token
• router：Vue Router，用于页面跳转（如登录失效时跳转到登录页）

2. 创建 Axios 实例

const service = axios.create({baseURL: "http://localhost:8080/api", // 后端地址timeout: 5000,
});

• baseURL：设置基础 URL，所有请求都会以此为前缀
• timeout：请求超时时间 5 秒，避免请求长时间挂起

3. 请求拦截器

service.interceptors.request.use((config) => {// 如果有token，添加到请求头if (store.getters.token) {config.headers["Authorization"] = "Bearer " + store.getters.token;}return config;},(error) => {console.log(error);return Promise.reject(error);}
);

功能说明：

• 自动添加认证头：检查 store 中是否有 token，如果有则自动添加到请求头
• Bearer Token 格式：使用标准的 JWT Token 认证格式
• 错误处理：捕获请求配置阶段的错误

4. 响应拦截器

这是代码的核心部分，处理各种响应情况：

4.1 特殊响应类型处理

// 如果是blob类型的响应（文件下载），直接返回
if (response.config.responseType === 'blob') {return response.data;
}// 如果响应的Content-Type是text/csv，也直接返回
const contentType = response.headers['content-type'];
if (contentType && contentType.includes('text/csv')) {return response.data;
}

• 文件下载处理：对于 blob 类型响应（通常是文件下载），直接返回数据
• CSV 文件处理：对于 CSV 格式的响应，也直接返回原始数据
• 避免数据结构解析：这些特殊类型不需要按照标准 API 响应格式处理

4.2 标准 API 响应处理

const res = response.data;
// 如果code不是200，说明出错了
if (res.code !== 200) {ElMessage({message: res.message || "请求失败",type: "error",duration: 5 * 1000,});// 401: 未登录if (res.code === 401) {store.dispatch("user/logout");router.push("/login");}return Promise.reject(new Error(res.message || "请求失败"));
} else {return res;
}

处理逻辑：

1. 统一响应格式：假设后端返回格式为 { code: number, message: string, data: any }
2. 错误状态处理：code 不为 200 时视为错误
3. 用户提示：使用 ElMessage 显示错误信息
4. 认证失效处理：
   • 401 状态码表示未登录或 token 过期
   • 自动执行登出操作（清除 store 中的用户信息）
   • 跳转到登录页面
5. 错误传播：返回 rejected Promise，便于上层捕获处理

4.3 网络错误处理

(error) => {console.log("err" + error);ElMessage({message: error.message,type: "error",duration: 5 * 1000,});return Promise.reject(error);
}

• 网络异常：处理网络连接失败、超时等错误
• 用户反馈：显示错误消息给用户
• 错误日志：在控制台记录错误信息

5. 设计模式和最佳实践

5.1 拦截器模式

• 请求拦截：统一添加认证信息
• 响应拦截：统一处理错误和特殊情况

5.2 错误处理策略

• 分层错误处理：网络错误、业务错误分别处理
• 用户友好：所有错误都有用户提示
• 自动化处理：认证失效自动跳转登录

5.3 代码复用

• 全局配置：一次配置，整个项目复用
• 统一格式：所有 HTTP 请求使用相同的处理逻辑

6. 使用示例

// 在组件中使用
import request from '@/utils/request'// GET 请求
request.get('/users')// POST 请求
request.post('/users', { name: 'John' })// 文件下载
request.get('/export/csv', { responseType: 'blob' })