vue实现接口封装的实现示例

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

• 新建一个 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
  }
  

• 在 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 属性，最终在模板中渲染出来。

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

到此这篇关于vue实现接口封装的实现示例的文章就介绍到这了,更多相关vue 接口封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论