@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"
                 }
              ]
           }
        }
     }
     

API

函数接收一个参数options对象，详细选项为

字段	类型	默认值	详情
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工具函数

更多示例

• 只对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()
  })
  

后续计划

• [ ] 使用ts重构
• [ ] 支持字段值的格式化
• [ ] 支持上传场景