用vue实现接口封装案例

接口封装案例"/>

用vue实现接口封装案例

以下是一个简单的 Vue.js 接口封装案例：

1. 新建一个 api.js 文件，用于封装接口请求：

   import axios from 'axios'// 创建 axios 实例
   const instance = axios.create({// API 地址baseURL: '/',// 超时时间timeout: 10000
   })// 封装 GET 请求
   function get(url, params) {return instance.get(url, { params })
   }// 封装 POST 请求
   function post(url, data) {return instance.post(url, data)
   }// 导出函数
   export default {get,post
   }
   

2. 在 Vue 组件中使用封装好的接口请求：

   <template><div><h1>{{ message }}</h1></div>
   </template><script>
   import api from './api'export default {data() {return {message: ''}},created() {api.get('hello', { name: 'world' }).then(response => {this.message = response.data.message}).catch(error => {console.error(error)})}
   }
   </script>
   

在上面的例子中，api.js 文件封装了 get() 和 post() 两个函数，用于 GET 和 POST 请求。在 Vue 组件中，通过 import api from './api' 引入封装好的请求函数，然后使用 api.get() 发起 GET 请求并传入参数。在请求成功后，将请求返回的数据通过 response.data 获取到，并将其赋值给 message 属性，最终在模板中渲染出来。

使用这种封装方式可以使代码更加模块化，方便维护和更新。同时也可以有效地解耦前端代码和后端接口，使得代码更加清晰易懂。