JavaScript前端中统一封装接口请求方法的核心是用ES模块导出配置好的Axios实例及语义化快捷方法，涵盖基础配置、请求/响应拦截器、错误处理与按需导入使用。
在 JavaScript（尤其是前端项目中）用 export 导出统一的接口请求方法封装，核心是把 Axios（或其他请求库）的通用配置、拦截器、错误处理等逻辑抽离成可复用的函数或实例，再通过 ES 模块语法导出，供其他模块按需导入使用。
1. 创建请求实例并配置基础选项
通常在 src/utils/request.js 或类似路径下创建一个封装好的 Axios 实例：
- 设置 baseURL、超时时间、请求头等公共配置
- 避免每次调用都重复 new Axios()，提升性能和一致性
示例：
import axios from 'axios';
const request = axios.create({
baseURL: import.meta.env.VUE_APP_BASE_API || '/api',
timeout: 10000,
headers: {
'Content-Type': 'application/json'
}
});
export default request;
2. 添加请求/响应拦截器（可选但推荐）
在导出前统一处理 token 注入、loading 状态、错误弹窗、状态码判断等逻辑：
- 请求拦截器：添加 Authorization、序列化参数等
- 响应拦截器：统一处理 401（跳登录）、500（提示错误）、业务 code 判断
示例（续写上面文件）：
// 请求拦截
request.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => Promise.reject(error)
);
// 响应拦截
request.interceptors.response.use(
response => {
const { code, data, msg } = response.data;
if (code === 200) return data;
else throw new Error(msg || '请求失败');
},
error => {
if (error.response?.status === 401) {
localStorage.removeItem('token');
window.location.href = '/login';
}
return Promise.reject(error);
}
);
export default request;
3. 导出封装好的请求方法（更语义化）
除了导出实例，还可以额外导出 get、post 等快捷方法，让调用更简洁：
- 适合团队规范或减少重复写
request.get(...) - 可带默认参数，比如自动加 loading、自动 catch 错误
示例（同一文件中）：
export const get = (url, params) => request.get(url, { params });
export const post = (url, data) => request.post(url, data);
export const put = (url, data) => request.put(url, data);
export const del = (url) => request.delete(url);
// 或者导出一个带业务层包装的方法
export const fetchUserList = (params) => get('/users', params);
4. 在组件中使用（按需导入）
不一定要 import 整个实例，可以只导入需要的方法，减小打包体积：
// 在 Vue 组件或 React Hook 中
import { get, post, fetchUserList } from '@/utils/request';
// 直接调用
get('/articles', { page: 1 }).then(data => console.log(data));
// 或使用语义化方法
fetchUserList({ role: 'admin' }).then(users => this.users = users);
// 提交表单
post('/login', { username, password })
.then(res => localStorage.setItem('token', res.token));
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
