在Web開發中，接口是前后端交互的重要環節之一。Vue是一個流行的JavaScript框架，它可以幫助我們快速構建前端應用程序。在Vue中，我們需要調用后端接口以獲取數據，這就需要使用Vue接口封裝調用。

Vue的API中有一個內置的HTTP請求插件，它可以發送HTTP請求并返回Promise。該插件可以很方便地與Vue進行結合使用，使我們能夠輕松調用API。

//導入axios模塊
import axios from 'axios'
//設置默認的請求地址
axios.defaults.baseURL = 'http://localhost:8080/api/'
//封裝get請求方法
export const get = (url, params) =>{
return new Promise((resolve, reject) =>{
axios.get(url, {params: params})
.then(res =>{
resolve(res.data)
})
.catch(err =>{
reject(err.data)
})
})
}
//封裝post請求方法
export const post = (url, params) =>{
return new Promise((resolve, reject) =>{
axios.post(url, params)
.then(res =>{
resolve(res.data)
})
.catch(err =>{
reject(err.data)
})
})
}

在上面的代碼中，我們首先導入了axios模塊，并設置了默認的請求地址。然后，我們封裝了兩個請求方法：get()和post()。這些方法通過Promise返回并處理成功或失敗的請求結果。

接下來，我們可以在Vue組件中調用這些方法并處理結果。

import { get, post } from '@/utils/api'
export default {
data() {
return {
items: []
}
},
methods: {
//獲取數據
getData() {
get('items')
.then(res =>{
this.items = res
})
.catch(err =>{
console.log(err)
})
},
//添加數據
addItem() {
post('items', {name: 'new item'})
.then(res =>{
console.log(res)
})
.catch(err =>{
console.log(err)
})
}
},
mounted() {
//組件加載時立即獲取數據
this.getData()
}
}

在上面的代碼中，我們導入了我們之前封裝的api模塊。然后，在組件中，我們定義了兩個方法：getData()和addItem()。getData()方法使用我們的get()方法獲取數據，并將結果存儲在組件的數據中。addItem()方法使用我們的post()方法添加新的數據。

最后，在組件的mounted()鉤子函數中，我們立即調用getData()方法以獲取初始數據。

Vue接口封裝調用可以幫助我們簡化對后端接口的調用，提高開發效率，并使我們的代碼更易于維護。通過封裝常用的HTTP請求方法，我們可以在組件中重用這些方法，從而避免代碼重復。