第七节Axios 二次封装 手写 Mock 数据Mock / 真实接口一键切换核心要点不引入 mockjs 插件纯手写 mock 模拟数据读取环境变量VITE_USE_MOCK控制开关开启则返回本地模拟数据关闭则走真实后端网络请求。步骤 1安装 axiospnpm add axios步骤 2新建 mock 模拟数据src/mock/index.js// 手写模拟接口数据exportdefault{// 登录接口/api/login:(params){const{username,password}paramsif(usernameadminpassword123456){return{code:200,msg:登录成功,data:{token:mock-token-123456}}}else{return{code:500,msg:账号密码错误,data:null}}},// 获取用户信息接口/api/getUserInfo:(){return{code:200,msg:获取成功,data:{username:admin,roles:[admin]}}}}步骤 3Axios 封装src/utils/request.jsimport axios fromaxiosimport{ElMessage}fromelement-plusimport mockData from/mock/indeximport{useUserStore}from/stores/user// 是否开启mockconstUSE_MOCKimport.meta.env.VITE_USE_MOCKconstBASE_URLimport.meta.env.VITE_API_BASE_URL// 创建axios实例constserviceaxios.create({baseURL:BASE_URL,timeout:10000})// 请求拦截器service.interceptors.request.use((config){constuserStoreuseUserStore()if(userStore.token){config.headers[Authorization]Bearer ${userStore.token}}returnconfig},(error){returnPromise.reject(error)})// 响应拦截器service.interceptors.response.use(async(response){returnresponse.data},(error){ElMessage.error(error.message||请求失败)returnPromise.reject(error)})// 手写mock判断封装async functionrequest(config){const{url,method,data,params}config// mock模式匹配本地mock接口不走网络if(USE_MOCKmockData[url]){constmockFuncmockData[url]// get取paramspost取dataconstreqParamsmethod.toLowerCase()get?params:datareturnnewPromise((resolve){// 模拟网络延迟setTimeout((){resolve(mockFunc(reqParams))},300)})}// 非mock模式走真实axios网络请求returnservice(config)}exportdefaultrequest步骤 4统一接口管理src/api/login.jsimport request from /utils/request // 登录 export function loginApi(data) { return request({ url: /api/login, method: post, data }) } // 获取用户信息 export function getUserInfoApi(params) { return request({ url: /api/getUserInfo, method: get, params }) }步骤 5改造登录页面调用真实封装后的 api修改src/views/login/index.vue的 script‑setup 部分script setup import { useUserStore } from /stores/user import { useRouter } from vue-router import { loginApi } from /api/login const router useRouter() const userStore useUserStore() const loginForm reactive({ username: , password: }) const handleLogin async () { if (!loginForm.username || !loginForm.password) { ElMessage.warning(账号密码不能为空) return } // 调用接口 const res await loginApi(loginForm) if (res.code 200) { userStore.setUserInfo(res.data.token, loginForm.username) ElMessage.success(登录成功) router.push(/dashboard/index) } else { ElMessage.error(res.msg) } } /script✅第七节测试重启项目pnpm dev当前.env.development中VITE_USE_MOCKtrue开启本地 mock访问/login输入账号admin密码123456→ 登录成功跳转首页输入错误账号密码 → 弹出【账号密码错误】提示F12 网络面板不会产生真实网络请求全部是本地 mock 返回。测试关闭 mock修改.env.development中VITE_USE_MOCKfalse重启服务此时会发起真实网络请求会报 404没有后端接口属于预期现象。关键点切换环境变量VITE_USE_MOCK即可在 mock 模拟数据 / 真实接口之间切换。