用vue实现接口封装案例

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

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

   import axios from 'axios'
   
   // 创建 axios 实例
   const instance = axios.create({
     // API 地址
     baseURL: 'https://example.com/api/',
     // 超时时间
     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 组件中使用封装好的接口请求：

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

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