在開發(fā)后臺(tái)管理系統(tǒng)時(shí)，我們一般都會(huì)涉及到與后臺(tái)接口的交互。而使用Vue封裝后臺(tái)接口可以方便我們?cè)谇岸酥姓{(diào)用后臺(tái)接口，簡(jiǎn)化代碼邏輯。

封裝后臺(tái)接口可以通過創(chuàng)建一個(gè)文件夾來存放相關(guān)的代碼，便于管理和維護(hù)。常見的封裝方式是使用axios庫(kù)創(chuàng)建一個(gè)請(qǐng)求對(duì)象，然后將請(qǐng)求對(duì)象封裝在一個(gè)js文件中，供其他組件使用。

import axios from 'axios';
let service = axios.create({
baseURL: '/api', // 接口地址
timeout: 5000 //超時(shí)時(shí)間
});
// 請(qǐng)求攔截器，用于在請(qǐng)求發(fā)送之前對(duì)請(qǐng)求進(jìn)行處理
service.interceptors.request.use(
config =>{
// 給請(qǐng)求頭添加Token等信息
if(localStorage.getItem('Token')) {
config.headers['Token'] = localStorage.getItem('Token');
}
return config;
},
error =>{
console.log(error);
return Promise.reject(error);
}
);
// 響應(yīng)攔截器，用于在接收后臺(tái)返回的消息時(shí)進(jìn)行處理
service.interceptors.response.use(
response =>{
const res = response.data;
// 在此處判斷狀態(tài)碼或者其他返回?cái)?shù)據(jù)信息
if (res.code !== 200 ){
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error =>{
console.log('An error occurred, please try again later!');
return Promise.reject(error);
}
);
export default service;

代碼中，我們首先引用了axios庫(kù)，并創(chuàng)建了一個(gè)請(qǐng)求對(duì)象 service。在請(qǐng)求攔截器中，我們可以對(duì)請(qǐng)求進(jìn)行處理，例如在請(qǐng)求頭中添加Token等信息。而在響應(yīng)攔截器中，我們可以對(duì)后臺(tái)返回的數(shù)據(jù)進(jìn)行處理，例如判斷接口狀態(tài)碼是否成功等。

接下來我們可以在組件中引用我們剛才封裝的接口：

import request from '@/utils/request';
export function getUsers() {
return request({
url: '/users',
method: 'get'
});
}

在組件中引入剛才封裝好的請(qǐng)求對(duì)象，然后用函數(shù) getUees() 進(jìn)行調(diào)用。在調(diào)用時(shí)，我們可以傳遞相關(guān)參數(shù)到請(qǐng)求對(duì)象中， 例如 RESTful API中的id，也可以指定method（'get', 'post'等）。

Vue的封裝后臺(tái)接口可以節(jié)省編寫代碼的時(shí)間，當(dāng)后臺(tái)接口需要更改時(shí)，我們只需要修改封裝的接口即可，不需要一個(gè)個(gè)組件進(jìn)行修改，大大提高了效率。