vue2 axios封装和后端对接

### Vue2 中封装 Axios 并与后端对接 API 在 Vue2 开发中，为了简化 HTTP 请求操作并增强项目的可维护性，通常会对 Axios 进行封装。以下是具体的实现方式： #### 1. 安装 Axios 首先需要安装 Axios 库： ```bash npm install axios --save ``` #### 2. 创建 Axios 实例 创建一个新的文件 `src/utils/request.js` 来定义 Axios 的全局配置和拦截器。 ```javascript import axios from 'axios'; // 创建 Axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置统一的请求前缀 timeout: 5000, // 超时时间 (毫秒) }); // 添加请求拦截器 service.interceptors.request.use( config => { const token = localStorage.getItem('token'); // 假设使用 Token 验证身份 if (token) { config.headers['Authorization'] = `Bearer ${token}`; // 自动携带 Token } return config; }, error => Promise.reject(error) ); // 添加响应拦截器 service.interceptors.response.use( response => response.data, // 返回原始数据而非整个响应对象 error => { console.error(`Error occurred during request: ${error.message}`); return Promise.reject(error); } ); export default service; ``` 此部分实现了对 Axios 的简单封装，并设置了请求头中的 Authorization 字段用于传递用户令牌[^4]。 #### 3. 封装通用方法 继续扩展上述文件，提供一些常用的 GET 和 POST 方法以便于项目其他地方调用这些函数而无需重复编写逻辑代码片段: ```javascript ... export function getAxios(url, params={}) { return service.get(url, {params}); } export function postAxios(url, data={}) { return service.post(url, data); } ... ``` 这样做的好处是可以让开发者仅需关注实际业务层面的数据处理而不是每次都要手动调整网络层细节设置。 #### 4. 使用封装后的 Axios 发起请求 假设有一个登录接口 `/login`, 可以像下面这样去调用它: ```javascript import {postAxios} from '@/utils/request' function login(username,password){ return postAxios('/login',{username,password}) .then(res=>{ if(res.code===200){ localStorage.setItem('token',res.token); // 存储返回来的 token 到本地存储里 return res.userinfo || {}; }else{ throw new Error(res.msg||'Login failed'); } }) } ``` 以上展示了如何基于前面所做的准备工作快速发起一次带有参数提交动作的服务端通信过程。 #### 5. 处理跨域问题 如果遇到 CORS(跨源资源共享)错误，则可能是因为服务器未正确配置允许来自前端域名下的资源访问权限所致。此时应该联系服务端工程师让他们修改相关策略或者考虑部署代理解决办法比如 vue.config.js 文件内的 devServer.proxy 属性配置[^1]。 --- ### 总结 通过对 Axios 的合理封装可以极大提升开发效率减少冗余代码量同时也提高了系统的健壮性和安全性。上述例子只是冰山一角实际上还可以加入更多功能例如加载动画显示隐藏机制等等进一步优化用户体验效果[^3]。