Skip to content
This repository has been archived by the owner on Jan 19, 2023. It is now read-only.

[重构]: 将mock和api进行抽象,并统一维护一个API List #9

Open
ACERY1 opened this issue Feb 28, 2018 · 0 comments
Open
Labels
enhancement New feature or request

Comments

@ACERY1
Copy link
Member

ACERY1 commented Feb 28, 2018

问题:因为前端采用了mockjs,所以后端每出一个接口,我会在mock里面添加templates,以及新加接口,还会为/src/API/index.js里面再次写一遍这个接口,显得重复麻烦,所以要进行重构。

重构预期效果:

  1. 统一维护一个API List,然后每次新添加接口mock和api同时更新。
  2. 通过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,而不用在组件内进行导入
  • 添加API的时候在APIList添加好就行,并定义好mock的template即可,无需重复定义mock路由和ajax路由
  • 添加了参数缺省判断,进行统一的错误拦截
@ACERY1 ACERY1 added the enhancement New feature or request label Feb 28, 2018
@ACERY1 ACERY1 changed the title [重构] 将mock和api进行抽象,并统一维护一个API List [重构]: 将mock和api进行抽象,并统一维护一个API List Feb 28, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant