在前端開發中，接口是不可或缺的一環。而在Vue中，如何調用接口呢？這篇文章將詳細介紹Vue中如何調用接口。

Vue中調用接口需要借助axios，axios是一個基于Promise的HTTP庫，可以用于瀏覽器和node.js的http請求。在使用axios之前，需要先安裝axios:

npm install axios --save

安裝好axios后，在main.js中引入axios:

import axios from 'axios'
Vue.prototype.$http = axios

這樣Vue的所有實例都能使用$http調用axios方法了。

接下來，我們看一下如何發送get請求：

// url為接口地址
this.$http.get(url)
.then(response =>{
console.log(response.data)
})
.catch(error =>{
console.log(error)
})

上面代碼中，使用了$http.get(url)發送get請求，并使用.then方法處理響應，使用.catch方法處理異常。

如果需要發送post請求，可以使用如下代碼：

// url為接口地址
// data為需要提交的數據
this.$http.post(url, data)
.then(response =>{
console.log(response.data)
})
.catch(error =>{
console.log(error)
})

同樣，先使用$http.post(url, data)發送post請求，再使用.then方法處理響應，使用.catch方法處理異常。

在有些情況下，我們需要設置請求頭，可以使用如下代碼：

axios.defaults.headers.common['Authorization'] = 'Bearer ' + token

上面代碼中，設置了請求頭，用于攜帶token信息。

除了get和post請求，axios還支持put、delete、patch等請求方式，使用方法和上面相同。

有時候，我們需要對請求進行攔截或者響應進行處理，可以使用攔截器：

//請求攔截
axios.interceptors.request.use(config =>{
//處理請求
return config
}, error =>{
return Promise.reject(error)
})
//響應攔截
axios.interceptors.response.use(response =>{
//處理響應
return response
}, error =>{
return Promise.reject(error)
})

上面代碼中，使用axios.interceptors.request.use對請求進行攔截，使用axios.interceptors.response.use對響應進行處理。

綜上，Vue中調用接口主要使用axios，并通過$http來調用axios方法。發送請求時，需要使用get和post等請求方式，并使用.then和.catch方法處理響應和異常。有時候需要設置請求頭，可以使用攔截器來處理請求和響應。