Nearly Perpendicular Macaroons

    @wecity/http-json-key-format

    0.0.4-alpha • Public • Published

    只需添加一行代码即可对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重构
    • [ ] 支持字段值的格式化
    • [ ] 支持上传场景

    Keywords

    none

    Install

    npm i @wecity/http-json-key-format

    DownloadsWeekly Downloads

    0

    Version

    0.0.4-alpha

    License

    ISC

    Unpacked Size

    13.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • zystylish
    • brian_zhang
    • legendlu
    • fenfeizeng
    • colinczhu
    • easonruan
    • yikazhu
    • daniel-dx
    • domy
    • delenzhang
    • vickiliang
    • derrickliu
    • xiaoyaojones
    • smileswlin
    • jillysong
    • allennzhang
    • sharryliao
    • pechelhuang
    • phspan