目录一、为什么要封装二、封装三步走1. 创建实例2. 添加拦截器请求拦截器 → 自动塞 Token响应拦截器 → 统一处理数据 错误3. 暴露 request三、封装前后对比很多前端新手在项目中会遇到一个问题每个接口文件里都要重复写baseURL、重复判断错误、重复手动塞 token……代码又臭又长。这篇文章我会从零开始带你理解 Axios 二次封装的每一个步骤保证你看完就能在自己项目里用起来。一、为什么要封装不封装的后果// 每个接口都要重复写这些... axios.get(/api/user, { headers: { Authorization: token } // 重复 }).catch(() alert(报错)) // 重复二次封装 axios 是为了统一规则方便管理例如公司规定所有接口必须自动带 token、统一错误提示等。封装后你只需要写request({ url: /user, method: GET }) // 完事二、封装三步走1. 创建实例根据 axios 的 create 方法创建 request 实例我们就可以自己去配置一些请求基础信息啦比如超时时间基础路径。import axios from axios; import { ElMessage } from element-plus; // 调用错误提示组件 let request axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 5000, });2. 添加拦截器请求拦截器 → 自动塞 Token// 请求拦截器 request.interceptors.request.use((config) { // 自动添加 token const token localStorage.getItem(token); if (token) { config.headers.Authorization Bearer ${token}; } return config; });响应拦截器 → 统一处理数据 错误// 响应拦截器 request.interceptors.response.use( (response) { // 成功回调 // 简化回调的数据 return response.data; }, (error) { // 失败回调 // 处理 http 网络错误 let msg ; // 储存错误信息 let status error.response.status; switch (status) { case 401: msg token 过期; break; case 403: msg 无权访问; break; case 404: msg 请求地址错误; break; case 500: msg 服务器出现问题; break; default: msg 无网络; } ElMessage({ type: error, message: msg }); return Promise.reject(error); // 不要让错误消失要把错误继续传递给调用接口的地方处理。 } );3. 暴露 request对外暴露 request就可以在其他地方直接用 request 发起请求。export default request;三、封装前后对比封装前每个接口 10 行代码重复 100 遍封装后每个接口 1 行代码全局统一管理
前端新手必看：Axios二次封装超精华教程（附完整代码）
目录一、为什么要封装二、封装三步走1. 创建实例2. 添加拦截器请求拦截器 → 自动塞 Token响应拦截器 → 统一处理数据 错误3. 暴露 request三、封装前后对比很多前端新手在项目中会遇到一个问题每个接口文件里都要重复写baseURL、重复判断错误、重复手动塞 token……代码又臭又长。这篇文章我会从零开始带你理解 Axios 二次封装的每一个步骤保证你看完就能在自己项目里用起来。一、为什么要封装不封装的后果// 每个接口都要重复写这些... axios.get(/api/user, { headers: { Authorization: token } // 重复 }).catch(() alert(报错)) // 重复二次封装 axios 是为了统一规则方便管理例如公司规定所有接口必须自动带 token、统一错误提示等。封装后你只需要写request({ url: /user, method: GET }) // 完事二、封装三步走1. 创建实例根据 axios 的 create 方法创建 request 实例我们就可以自己去配置一些请求基础信息啦比如超时时间基础路径。import axios from axios; import { ElMessage } from element-plus; // 调用错误提示组件 let request axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 5000, });2. 添加拦截器请求拦截器 → 自动塞 Token// 请求拦截器 request.interceptors.request.use((config) { // 自动添加 token const token localStorage.getItem(token); if (token) { config.headers.Authorization Bearer ${token}; } return config; });响应拦截器 → 统一处理数据 错误// 响应拦截器 request.interceptors.response.use( (response) { // 成功回调 // 简化回调的数据 return response.data; }, (error) { // 失败回调 // 处理 http 网络错误 let msg ; // 储存错误信息 let status error.response.status; switch (status) { case 401: msg token 过期; break; case 403: msg 无权访问; break; case 404: msg 请求地址错误; break; case 500: msg 服务器出现问题; break; default: msg 无网络; } ElMessage({ type: error, message: msg }); return Promise.reject(error); // 不要让错误消失要把错误继续传递给调用接口的地方处理。 } );3. 暴露 request对外暴露 request就可以在其他地方直接用 request 发起请求。export default request;三、封装前后对比封装前每个接口 10 行代码重复 100 遍封装后每个接口 1 行代码全局统一管理
