You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Jan 19, 2023. It is now read-only.
问题:因为前端采用了mockjs,所以后端每出一个接口,我会在mock里面添加templates,以及新加接口,还会为/src/API/index.js里面再次写一遍这个接口,显得重复麻烦,所以要进行重构。
重构预期效果:
this.$API
进行全局调用,而不用每次都在组件里面导入。[重构进度]:还没有删除旧版代码 || 代码没做更多优化
设计的API List的单元结构为:[API name]:{ url , method, data, headers}
如
Test: {url: '/test', method: 'get', data: {}, headers: {}}
[逻辑介绍和功能说明]:如上述的
Test: {url: '/test', method: 'get', data: {}, headers: {}}
,‘Test’是api-key
。mock部分
mock的原理是根据
URL
来拦截,所以设计了通过URL
来查询api-key
,查到之后再拿该api-key
作为template-key
去获取mock的数据模板。ajax部分
ajax的使用是方法是输入一个
api-key
来获取对应的URL,method,data,headers,如果查询失败则返回notFound
,如果查询成功但是缺少API List
里的data里的字段或者headers里的字段,会抛出missingArguments
。值得一提的是,通过
组件继承
的方式来实现了全局方法的安装,如this.$API
就可以调用API,this.$util
就可以调用工具函数。相关代码文件路径
最终效果
this.$API('apiName')
便可以在组件里调用API,而不用在组件内进行导入The text was updated successfully, but these errors were encountered: