api目錄
我們項(xiàng)目中有一個(gè)api目錄悦荒，放著所有的請(qǐng)求的代碼春锋，
async function getIsOpen (params) {
return await fetchSmart('api/foreign/getIsOpen_v3', {
method: 'post',
params,
})
}
async function testStarted (params) {
return await fetchSmart('api/foreign/testStarted', {
method: 'post',
params,
})
}
不只我們公司的項(xiàng)目累贤，別的公司的項(xiàng)目也分了這個(gè)目錄奔垦，但是拆分出api這個(gè)目錄的意義何在屹耐？
無(wú)意義的封裝
我們都知道拆分是為了復(fù)用，而http接口是和服務(wù)端交互數(shù)據(jù)的一種方式椿猎，在項(xiàng)目中大量存在惶岭。所以，封裝是必要的犯眠，但應(yīng)該把請(qǐng)求之前的參數(shù)處理按灶，和響應(yīng)之后的數(shù)據(jù)處理都封裝起來(lái)。這樣的封裝才是可復(fù)用有意義的筐咧，不然兩個(gè)地方用到了同一個(gè)api中的接口鸯旁，卻需要對(duì)響應(yīng)數(shù)據(jù)做兩次處理噪矛，而且連參數(shù)也需要自己處理，這樣有什么意義呢铺罢。就像之前聊過(guò)的同步多次賦值艇挨，異步多層promise，或者多次無(wú)任何操作的調(diào)用一樣畏铆，都是無(wú)用功雷袋。
let a = 1;
a = a;// 無(wú)意義
a = a; // 無(wú)意義
new Promise((resolve, reject) => {
return new Promise((resolve, reject) => {// 無(wú)意義
return new Promise((resolve, reject) => { // 無(wú)意義
})
})
})
const a = (num1,num2) => {
return num1 + num2;
}
const b = (num1,num2) => {// 無(wú)意義
return a(num1, num2);
}
const c = (num1, num2) => {// 無(wú)意義
return b(num1, num2);
}
你可能覺(jué)得你不會(huì)寫(xiě)上面的代碼，但再看一遍api下的代碼辞居，不覺(jué)得是一樣的么
async function getStuList (params) {
const response = await fetchSmart('api/getStuList', {
method: 'post',
params,
}).catch(error => {
return error;
});
return response;
}
對(duì)參數(shù)沒(méi)做任何處理楷怒，對(duì)響應(yīng)沒(méi)做任何處理，本來(lái)是promise返回的也是promise瓦灶，代碼里用
const studentList = await getStudentList(params);
和
const studentList = await fetchSmart('api/getStuList', {
method: 'post',
params,
})
沒(méi)有很大的區(qū)別鸠删。
正確的封裝
異步請(qǐng)求的代碼應(yīng)該放在service中，在組件里面只要調(diào)用傳入?yún)?shù)就好了贼陶，請(qǐng)求前的參數(shù)處理刃泡，還有響應(yīng)后的數(shù)據(jù)處理都是封裝好了的，組件拿到的是處理好的數(shù)據(jù)碉怔，這才是api應(yīng)該的形式烘贴。
/* GET heroes whose name contains [search](https://www.angular.cn/api/common/PlatformLocation#search) term */
searchHeroes(term: string): Observable<Hero[]> {
if (!term.trim()) {
// if not [search](https://www.angular.cn/api/common/PlatformLocation#search) term, return empty hero array.
return of([]);
}
return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
tap(_ => this.log(`found heroes matching "${term}"`)),
catchError(this.handleError<Hero[]>('searchHeroes', []))
);
}
在vuex里面service就是action handler，api層應(yīng)該合并到action handler里撮胧，單獨(dú)出來(lái)的意義不大桨踪。
總結(jié)
封裝的意義是為了復(fù)用一段處理邏輯，像api這樣只是傳遞了一層芹啥，沒(méi)做任何處理的封裝是沒(méi)意義的锻离，封裝一千層也不解決問(wèn)題，api應(yīng)該包括請(qǐng)求之前的參數(shù)處理墓怀，和響應(yīng)之后的數(shù)據(jù)處理汽纠，也就是service層的工作。在vuex中對(duì)應(yīng)的是action handler傀履。當(dāng)然名字叫什么或者放在什么地方不重要虱朵，更重要的是，減少無(wú)意義的封裝钓账，讓每一個(gè)目錄都有意義碴犬。
