企业官网建设流程全解析

（对axios还不熟悉，可能有不对的地方，欢迎指正）

一、二次封装

• axios二次封装：从请求中提取相同的功能封装成一个组件，响应也类似。可以提高代码复用性，并且集中处理请求/相应逻辑。
• 二次封装步骤：

1. 创建封装文件，一般在src/utils文件夹，然后创建axios实例

// 创建 axios 实例constrequest=axios.create({baseURL:process.env.VUE_APP_BASE_API,// API 基础路径timeout:10000,// 超时时间headers:{// 默认请求头'Content-Type':'application/json'}});

2. 添加请求拦截器
3. 添加响应拦截器
4. 添加辅助函数

// 处理 token 过期functionhandleTokenExpired(){// 清除 tokenlocalStorage.removeItem('token');sessionStorage.removeItem('token');// 显示提示Modal.confirm({title:'登录已过期',content:'您的登录已过期，请重新登录',okText:'重新登录',onOk(){// 跳转到登录页router.replace('/login');}});}// 处理业务错误functionhandleBusinessError(code,message){consterrorMessages={1001:'用户名或密码错误',1002:'验证码错误',1003:'账号已被锁定',2001:'token 已过期',2002:'token 无效',// ... 其他业务错误码};consterrorMsg=errorMessages[code]||message||'操作失败';message.error(errorMsg);// 特殊错误码处理if([2001,2002].includes(code)){handleTokenExpired();}}

5. 封装常用请求方法
6. … …

二、拦截器

以请求拦截器为例，执行流程

请求 → 请求拦截器 → 服务器 → 响应 → 响应拦截器 → 你的代码

• 请求拦截器用于统一处理响应数据

axios.interceptors.response.use((response)=>{// 假设后端返回 { code: 0, data: {...}, message: 'success' }if(response.data.code===0){returnresponse.data.data;// 直接返回业务数据}else{returnPromise.reject(response.data.message);}},(error)=>{returnPromise.reject(error);});// 使用：直接拿到业务数据，不用再 response.data.dataconstdata=awaitaxios.get('/api/user');

• 完整的请求生命周期
  

请求拦截器：在请求发出前执行
响应拦截器：在响应到达后执行
执行顺序：
请求拦截器：按代码顺序执行（1→2→3）
响应拦截器：代码的逆序，后进先出，后写的先执行（3→2→1）