axios-service
安装
# dependencies npm install axios-service -S # devDependencies npm install axios-service -D
全局配置
注意: 全局设置为全局通用的配置, 需要再入口处设置, 下面配置项也可以针对某个请求单独设置
配置参数说明
// 配置示例axiosService
参数介绍
apis配置示例
注意: 下面的root参数应该从配置项中根据环境来获取, 这里仅仅是演示
// root: 请求跟路劲, 这里默认都是全局, 不走axios.createconst get post postXForm postXFormData postXFormString = // isCreateInstance 表示axios.create创建新的实例const get: peGet post: post restFulGet: peRestFulGet = const getInfo = // 自定义keyconst getPeInfo = // dataKey为null时, 会直接将http请求中的data字段返回const getInfoNoDataKey = // 自定义config,const getPeInfo = // 扩展函数参数// 如: post请求, url上带query stringconst postPeInfo = const postXFormData = const postXFormString = // 扩展函数Promise, 适合异步获取请求参数const peUserLoginPost = const atomPromise = { }const asyncAddUidToApi = atomPromise const asyncPostPeInfo =
具体使用
新版的servce在api中配置完即可直接使用, 不需要再次S.extend之类的, 也不需要从Service中获取具体的请求函数
// 第一个参数就是请求的参数, 第二个参数是额外的配置 // 第一个then是成功的回调, 是通过successCode和codeKey一起判断,
restFul配置
const get: peGet post: pePost restFulGet: peRestFulGet = // 注意: url中需要再次配置的, 用$开始, 如$page_size, 即表示这个位置需要传入 page_size这个参数的值const getHost =
// 第一个参数是urlData, 即restFul中需要替换url的值, 拼接的过程serviceProxy会处理// 第二个参数是具体的data
mock装饰器
axios-service与axios-mock-adapter并没有冲突, 只是
- axios-mock-adapter一旦使用, 全局所有用axios请求的接口都要进行mock, 如果大型项目, 每个接口都需要维护mock工作量成本过大, 本库提供的方案可以针对需要mock的接口单独做简单mock, 可灵活处理
- 本库提供一个保险机制, 在getMockDecoratorByEnv传入一个Boolean值, 如果是
真
走mock, 如果是假
则走针接口, 可以保证在生产环境不会被mock干扰
本库提供两个方案, 一个是函数包裹, 一个是类的装饰器方案. 如果用类的方案,需要添加class的decorators解析器babel-plugin-transform-decorators
使用案例:
// 传入的值为: 是否为开发环境. 该变量是做一层保障, 在[生产模式]会走直接口, [开发环境]走mock数据, 以防忘记关闭mock而打包上线, 导致线上请求mock数据的情况// web项目const mockDecorator = // react-native项目const mockDecorator = // 注意: 从1.3.1起, 直接暴露了mockDecorator函数, 不需要通过getMockDecoratorByEnv来创建 // mock相关逻辑const mockGetInfo = // 包裹函数的写法const getInfoWithMock =
消息装饰器
消息装饰器是一个工具函数, 与axios-service没有关联, 可装饰任何返回Promise的函数, 该装饰器更多提供的只是一个装饰的思路, 开发者可自由扩展自定义装饰器, 如异步参数依赖, 单例, loading等等
// 本库并不强依赖redux, 其他具有compose功能的库都可以用, 如: ramda// const { compose } = require('ramda') const getErrorMsg = serviceHocsconst get post postXFormData postXFormString = /** * 实际项目中应该替换 success 和 erorr 对应的ui函数 */const messageDecorator = const requestFailMsg = /** * 单个装饰器 */ @ getInfo = /** * 多个装饰器 */ @ @mockSuccess getInfo = /** * 函数式写法 */ getInfoFunc =
未使用消息装饰器接口的写法
// 如果api.getInfo被多次调用, 每次调用都需要写toast相关逻辑api api api
使用消息装饰器的用法
// 该接口使用多次之后, 不需要每次都进行消息提示api api api
更多装饰器
主要包含setDataDecorate、setParamsDecorate、delayDecorate等装饰器, 下面是具体用法:
其中setDataDecorate
代替原setCustomDataWrapper
高阶函数用法, setParamsDecorate
代替原setCustomParamsWrapper
高阶函数用法
其中delayDecorate
这里是直接给web端用的, 内置production保护机制, 如果是rn端和小程序端, 请参考中getDelayDecorate
用法
const requestOptsWrapper setDataDecorate setParamsDecorate delayDecorate = serviceHocsconst get: baseGet post: basePost = const responseKeys = msgKey: 'msg_custom' codeKey: 'code_custom' successCode: 0 const customData = name: 'libx' birth: '1996' const customParams = uid: 123 sid: 456 const get = const post = getInfoCustom = postInfoCustom = // 将customParams 固定到请求的query string中 @ getInfoWithParamsDecorator = // 将customData 固定到请求的body体中 @ getInfoWithDataDecorator = @ @ getInfoWithParamsAndDataDecorator = @ @mockGetInfo // 延时3s, 注意: 这里是web端, 内置production保护机制, 如果是rn端和小程序端, 请参考中`getDelayDecorate`用法 @ @ @ getInfoWithMoreDecorators =
更多详细使用请参考: apis-request-decorators
其他高阶函数
const requestOptsWrapper = serviceHocsconst get: baseGet post: basePost postXForm = const responseKeys = msgKey: 'msg_custom' codeKey: 'code_custom' successCode: 0 const get = const post = /** * before: * export const getInfoCustom1 = get('/api/getInfoCustom1', responseKeys) * export const getInfoCustom2 = get('/api/getInfoCustom2', responseKeys) * export const getInfoCustom3 = get('/api/getInfoCustom3', responseKeys) * after: * 将每次都传入的requestOpts给柯里化起来 */const getInfoCustom1 = const getInfoCustom2 = const getInfoCustom3 = // post同理const postInfoCustom1 = const postInfoCustom2 = const postInfoCustom3 =
setCustomDataWrapper 和 setCustomParamsWrapper
这两个函数已经🚫 DEPRECATED
不建议使用, 请使用更多装饰器
中的装饰器来解决相同场景的业务
const requestOptsWrapper setCustomDataWrapper setCustomParamsWrapper = serviceHocsconst get: baseGet post: basePost postXForm = const responseKeys = msgKey: 'error_msg' codeKey: 'dm_error' successCode: 0 const customData = name: 'libx' birth: '1996' const customParams = uid: 123 sid: 456 const get = const post = // basicconst composeGet = baseGet // orconst requestHoc = const composePost = const composeGet = const getInfoCustom = const postInfoCustom = /** * 混合 setCustomDataWrapper 和 requestOptsWrapper 两种预置 */const getInfoCustomComposedData = /** * 混合 requestOptsWrapper 和 setCustomParamsWrapper 两种预置 */const postInfoCustomComposedParamsAndData =
更多详细使用请参考: api-request-custom
创建新实例
配合axios.create使用, 创建新的axiosService实例, 更多案例详情, 请查看使用案例axios-service-create
const instance = axiosconst customService = axiosService instanceinterceptorsrequest const getRequestsByRoot = customServiceconst get post postXForm = const axiosServiceCreateGetInfo =
更多实际演示请查看代码
启动命令示例
# api实际演示案例 npm run example # 模拟api接口的node服务 npm run apiserver
项目构建
npm run build
项目发布
npm run pub
项目规范
- readme: 组件所涉及配置、方法和基础使用一定要详细和正确, 让开发人员复制过来就能用
- example: 一定要有示例, 其他开发人员才能更容易看懂
- src: 具体逻辑放到src(source)下面
- build: 是构建和发布相关
- dist: 是构建之后的目录, 支持dev和prod双模式
- package.json
- scripts: 抽象不同功能, 一定要自动化
- main: 指定node_modules中依赖的入口文件
- eslint: 业务代码要有规范, 通用项目更要有代码规范,
- changelog: 每次项目迭代所做的修改一定做好记录
- test: 通用的组件肯定是业务无关的, 最好要有单元测试
- travis:持续集成