封装的意义：为什么项目中不需要“api”这个目录
2018-09-27 本文已影响270人
凌霄光
api目录
我们项目中有一个api目录，放着所有的请求的代码，
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,
})
}
不只我们公司的项目，别的公司的项目也分了这个目录，但是拆分出api这个目录的意义何在？
无意义的封装
我们都知道拆分是为了复用，而http接口是和服务端交互数据的一种方式，在项目中大量存在。所以，封装是必要的，但应该把请求之前的参数处理，和响应之后的数据处理都封装起来。这样的封装才是可复用有意义的，不然两个地方用到了同一个api中的接口，却需要对响应数据做两次处理，而且连参数也需要自己处理，这样有什么意义呢。就像之前聊过的同步多次赋值，异步多层promise，或者多次无任何操作的调用一样，都是无用功。
let a = 1;
a = a;// 无意义
a = a; // 无意义
new Promise((resolve, reject) => {
return new Promise((resolve, reject) => {// 无意义
return new Promise((resolve, reject) => { // 无意义
})
})
})
const a = (num1,num2) => {
return num1 + num2;
}
const b = (num1,num2) => {// 无意义
return a(num1, num2);
}
const c = (num1, num2) => {// 无意义
return b(num1, num2);
}
你可能觉得你不会写上面的代码，但再看一遍api下的代码，不觉得是一样的么
async function getStuList (params) {
const response = await fetchSmart('api/getStuList', {
method: 'post',
params,
}).catch(error => {
return error;
});
return response;
}
对参数没做任何处理，对响应没做任何处理，本来是promise返回的也是promise，代码里用
const studentList = await getStudentList(params);
和
const studentList = await fetchSmart('api/getStuList', {
method: 'post',
params,
})
没有很大的区别。
正确的封装
异步请求的代码应该放在service中，在组件里面只要调用传入参数就好了，请求前的参数处理，还有响应后的数据处理都是封装好了的，组件拿到的是处理好的数据，这才是api应该的形式。
/* 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层应该合并到action handler里，单独出来的意义不大。
总结
封装的意义是为了复用一段处理逻辑，像api这样只是传递了一层，没做任何处理的封装是没意义的，封装一千层也不解决问题，api应该包括请求之前的参数处理，和响应之后的数据处理，也就是service层的工作。在vuex中对应的是action handler。当然名字叫什么或者放在什么地方不重要，更重要的是，减少无意义的封装，让每一个目录都有意义。
