# 概述
为统一项目前端部分的代码组织风格,做一些探讨。这里讨论 请求接口写法和vuex的使用。因为请求回来的数据往往有可能要放到vuex中。(这里默认项目要使用vuex)
## 请求接口
先看一些老项目的代码<br>
1 vue-resource<br>
除了共用的用户信息和权限放在vuex外其他的都是每个页面自己组织组件的数据,写法如下:
ApiUtils.httpGet('/main/api/addressbook/role/list/flat', {}, ({ data }) => {
self.roles = data.roleFlats.filter(r => r.roleStatus === 1);
}, msg => self.$message.error(msg))
特点:路径 参数 成功的回调 失败的回调 都是在一起的,每个接口都是这样的一个逻辑模板。以后的项目不再使用vue-resource<br>
2 axios
// 定义
export function saveSub (sub) {
return request({
url: '/sub',
method: sub.id === 0 ? 'post' : 'put',
data: sub
})
}
// 使用
import { saveSub } from 'path'
saveSub(parameter)
.then(res => {
console.log('getRoleList', res)
})
.catch(err => {
console.log(err)
})
特点:统一定义,按需导入使用,调用时只传参数,可以结合es7 await async 语法简化操作。<br>
## 结