以下是一個(gè)簡單的 Vue.js 接口封裝案例：

• 新建一個(gè) api.js 文件，用于封裝接口請(qǐng)求：

  import axios from 'axios'
  
  // 創(chuàng)建 axios 實(shí)例
  const instance = axios.create({
    // API 地址
    baseURL: 'https://example.com/api/',
    // 超時(shí)時(shí)間
    timeout: 10000
  })
  
  // 封裝 GET 請(qǐng)求
  function get(url, params) {
    return instance.get(url, { params })
  }
  
  // 封裝 POST 請(qǐng)求
  function post(url, data) {
    return instance.post(url, data)
  }
  
  // 導(dǎo)出函數(shù)
  export default {
    get,
    post
  }
  

• 在 Vue 組件中使用封裝好的接口請(qǐng)求：

  <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() 兩個(gè)函數(shù)，用于 GET 和 POST 請(qǐng)求。在 Vue 組件中，通過 import api from './api' 引入封裝好的請(qǐng)求函數(shù)，然后使用 api.get() 發(fā)起 GET 請(qǐng)求并傳入?yún)?shù)。在請(qǐng)求成功后，將請(qǐng)求返回的數(shù)據(jù)通過 response.data 獲取到，并將其賦值給 message 屬性，最終在模板中渲染出來。

使用這種封裝方式可以使代碼更加模塊化，方便維護(hù)和更新。同時(shí)也可以有效地解耦前端代碼和后端接口，使得代碼更加清晰易懂。

到此這篇關(guān)于vue實(shí)現(xiàn)接口封裝的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue 接口封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論