只需添加一行代码即可对http请求的请求参数和响应参数中的json字段进行格式化,无依赖,无侵入,支持微信小程序端(weApps/原生小程序)、浏览器端(axios/fetch/原生js),支持自定义格式化和自定义过滤请求。
npm install @wecity/http-json-key-format只需添加一行代码即可对http请求的请求参数和响应参数中的json字段进行格式化,无依赖,无侵入,支持微信小程序端(weApps/原生小程序)、浏览器端(axios/fetch/原生js),支持自定义格式化和自定义过滤请求。
适用于旧项目的后端接口规范变动,前端又不想逐个修改已有字段的情况。新项目不建议使用
1. 下载安装gnpm
2. 安装依赖
```
gnpm i @govcloud/http-json-key-format
3. 代码示例
* weApps小程序环境: 小程序生命周期onAppLaunch最开始的时候调用
`
// global.lifecycle
import httpJsonKeyFormatter,{toCamelCase,toPascal,loopAndFormat} from '@govcloud/http-json-key-format'
export default {
onAppLaunch(launchOpts) {
resJsonKeyFormat({
engine: 'wx',
reqKeyFormatter: toPascal, // 对请求参数进行转换,这里使用提供的toPascal工具函数将请求参数转换为大驼峰格式
resKeyFormatter: toCamelCase // 对响应参数进行转换,这里使用提供的toCamelCase工具函数将响应参数转换为小驼峰格式
})
// ...其他业务逻辑
}
}
`
* 原生小程序环境: 小程序入口文件生命周期onLaunch最开始的时候调用
`
// app.js
import httpJsonKeyFormatter,{toCamelCase,loopAndFormat} from '@govcloud/http-json-key-format'
App({
onLaunch() {
httpJsonKeyFormatter({
engine: 'wx',
reqKeyFormatter: toPascal,
resKeyFormatter: toCamelCase
})
// ...其他业务逻辑
}
})
`
* 浏览器环境:项目入口文件最开始的时候调用,以Vue项目为例
`
// main.js
import httpJsonKeyFormatter,{toCamelCase,loopAndFormat} from '@govcloud/http-json-key-format'
httpJsonKeyFormatter({
engine: 'xhr', // 如果项目用fetch做为http引擎,则这里填 fetch
reqKeyFormatter: toPascal,
resKeyFormatter: toCamelCase
})
`
4. 效果展示
以配置resKeyFormatter=toCamelCase为例,将http返回的字段都转为小驼峰
* 使用前
``
// http返回的字段都是大驼峰
{
"Response": {
"Data": {
"PageNo": "1",
"PageSize": "10",
"Total": "13",
"List": [
{
"ProjectId": "123"
}
]
}
}
}
* 使用后
``
// http返回的字段都转为小驼峰了
{
"response": {
"data": {
"pageNo": "1",
"pageSize": "10",
"total": "13",
"list": [
{
"projectId": "123"
}
]
}
}
}
对象,详细选项为 | 字段 | 类型 | 默认值 | 详情 |
| ---- | ---- | ---- |---- |
| engine | String: xhr \| fetch \| wx | xhr | xhr:浏览器环境使用原生xhr对象进行请求,如axios库;fetch:浏览器环境使用fetch进行请求 ; wx:小程序环境使用wx.request进行请求 |
| filter | Function({url,method}) => Boolean | 无 | 对请求进行过滤,默认不过滤,返回值为true的请求才会进行格式化,参数为{url,method} |
| resKeyFormatter | Function(key,value) | 无 | 对返回JSON的字段key格式化,默认不转换,参数为key,value。如需转换为小驼峰,可直接使用导出的toCamelCase工具函数 |
| reqKeyFormatter | Function(key,value) | 无 | 对请求的字段key格式化,支持url中拼接的queryParams和请求体中的JSON,默认不转换,参数为key,value。如需转换为大驼峰,可直接使用导出的toPascal工具函数 |
$3
* 只对get请求进行格式化
`
httpJsonKeyFormatter({
engine: 'xhr' ,
filter: ({url,method}) => method === 'get'
})
`
* 只对旧版本接口(如: /v1版本 )进行格式化
`
httpJsonKeyFormatter({
engine: 'xhr' ,
filter: ({url,method}) => url.includes('/v1/')
})
`
* 所有的返回字段都转换为小写
`
httpJsonKeyFormatter({
engine: 'xhr' ,
keyFormatter: (key,value) => key.toLowerCase()
})
``