前端請求接口是開發中常見的操作，尤其是在涉及到數據展示或數據查詢的場景。在Vue里，我們可以通過封裝請求接口的方式大大提高代碼的可讀性和代碼復用性。下面我們來詳細介紹如何在Vue中封裝請求接口。

首先，我們需要安裝axios，這是一個基于Promise的HTTP庫，可以用在瀏覽器和node.js中。

npm install axios --save

接下來，我們先新建一個api.js文件，用于封裝請求接口。在該文件中，我們會定義一些常量和方法。

import axios from 'axios';
const baseUrl = 'http://localhost:3000';
export const apiTest = (params) =>{
return axios.get(`${baseUrl}/api/test`, { params })
.then(res =>{
return res.data;
});
};

但是這樣的方式，我們還需要定義很多請求，會使得api.js文件變得十分臃腫。因此，我們可以將該文件進行模塊化，將不同的請求放在不同的js文件中，這樣既方便復用又使得代碼更加清晰。

接下來，我們可以將這些請求封裝到Vue的原型鏈上。這樣我們在任意組件中都可以直接通過$this.xxx()的方式調用API接口了。我們在main.js文件中進行掛載：

import Vue from 'vue';
import App from './App.vue';
import * as api from './api';
Vue.prototype.$api = api;
new Vue({
el: '#app',
render: h =>h(App)
});

這樣，我們就可以在組件中調用請求接口方法了。例如，我們在某個組件中需要調用api.js中的某個請求：

this.$api.apiTest(params).then(res =>{
console.log(res);
}).catch(err =>{
console.error(err);
});

為了更好的體驗，在請求接口之前，我們可以在組件中增加一個loading動畫。在請求返回之后，將其移除即可。

以上就是Vue請求接口封裝的詳細介紹。通過以上的方法，我們可以提高代碼的可讀性、可維護性，同時也方便了組件的復用。