接口交互开发是做为一个互联网产品必定要面对的事件。
记得之前去一家公司看打到过老代码，在一个Service文件夹下，全部都是将API地址封装成了一个一个办法。
export const getOneInfo = () => { return axios.get('/one/info')}export const getTwoInfo = () => { return axios.get('/two/info')}// ...可能他们是感觉为了封装成service而后反复利用这个申请。
然而反而带来几个问题
- 新增接口就须要手动生成一大坨模板代码，真正有用的其实就是不一样的接口地址而已。
- 接口批改之后，办法名要么跟着变，要么就和接口地址呈现不一样。
@zeesuu/service 能够将接口封装简化，也缩小下面的问题呈现。
$ npm install @zeesuu/service -S// main.jsimport ZeesuuService from ' @zeesuu/service';// 将所有的API对立治理const APIs = [// 格局为: apiUrl | method | alias// apiUrl 为必填, method 不填时默认为get, alias 选填'/user/login|post|UserLoginFunction',// 默认get 办法'/user/info',// 这个例子只有apiUrl和alias,method局部默认为get,然而要给到两个竖线作为分隔'/user/list||AllUserList',// 这个例子适宜RESTful的url设计'/video/upload/(id)/delete/(pid)|post',// 这个例子适宜配置其余域名下的申请地址'http://www.xyz.com/aaa/bbb','https://www.xyz.com/ccc/ddd',];// 配置Vue.use(ZeesuuService, { $http: axios, //本人封装好的申请对象 apis: APIs, // 可选配置项, 默认是''。 根据$http配置的申请对象来 appRoot: 'http://www.xyz.com/', // 可选配置, 默认是false, 小程序的申请参数构造和axios不一样。 isMini: true, // 关上调试,能够显示所有曾经转换的service debug: true,});<tempalte>...</template><script> export default { mounted() { // 应用@zeesuu/service后 // APIs中的 '/user/login|post|UserLoginFunction', 主动封装成以下办法 this.$service.UserLoginFunction({}) .then(res => {}) .catch(err => {}) // APIs中的 '/user/Info'主动封装成以下办法 this.$service.UserInfo() .then(() => {}) .catch(err => {}) // 应用绝对路径的API配置转化，留神 https/http this.$service.HttpAaaBbb() this.$service.HttpsCccDdd() } }</scritp>