vue2api接口

### Vue 2 API 接口使用说明 Vue 2 的 API 接口通常通过 Axios 或其他 HTTP 请求库来完成与后端服务的交互。以下是关于如何在 Vue 2 中封装和调用 API 接口的相关信息。 #### 封装 API 接口 为了提高代码可维护性和复用性，在实际开发中会将 API 调用逻辑集中到单独的模块中进行管理。以下是一个基于 Axios 的简单封装示例： ```javascript // utils/request.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置基础路径 timeout: 5000 // 请求超时时间 }); // 添加请求拦截器 service.interceptors.request.use( config => { // 在发送请求之前做些什么，比如添加 token 到 headers const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => { Promise.reject(error); } ); // 添加响应拦截器 service.interceptors.response.use( response => { return response.data; // 返回数据部分 }, error => { console.error(error); // 处理错误 return Promise.reject(error); } ); export default service; ``` #### 定义具体的 API 方法 定义好通用的请求工具之后，可以根据业务需求进一步封装具体的功能接口。例如登录功能的封装如下： ```javascript // api/user.js import request from '@/utils/request'; /** * 用户登录接口 * @param {Object} data - 登录参数对象 * @returns {Promise<Object>} 响应结果 */ export function loginAPI(data) { return request({ url: '/auth/login', method: 'post', data, }); } /** * 获取用户信息接口 * @returns {Promise<Object>} 响应结果 */ export function getUserInfo() { return request({ url: '/user/info', method: 'get' }); } ``` 以上代码展示了如何利用封装好的 `request` 工具发起 POST 和 GET 类型的请求[^2]。 #### 使用封装后的 API 在组件内部可以通过引入这些封装的方法轻松调用对应的接口： ```javascript <template> <div>{{ userInfo.name }}</div> </template> <script> import { loginAPI, getUserInfo } from '@/api/user'; export default { data() { return { userInfo: {} }; }, methods: { async fetchUserInfo() { try { this.userInfo = await getUserInfo(); } catch (error) { console.error('Failed to get user info:', error); } } }, created() { this.fetchUserInfo(); // 组件加载完成后自动获取用户信息 } }; </script> ``` 此段代码演示了如何在一个 Vue 组件中调用封装过的 API 并处理其返回的结果。 #### Swagger 集成支持 如果项目中有集成 Swagger 自动生成文档，则前端开发者可以直接参考自动生成的 API 文档来进行接口对接工作。对于 .NET Core 后台服务来说，安装 Swashbuckle 包可以帮助快速生成 Web API 的在线文档界面[^1]。这样不仅减少了前后端沟通成本，还提高了开发效率。 --- ###