java返回前端冗余,强行震惊！竟然解决了请求接口中的冗余

直入主题

一个解决接口冗余的小轮子

npm i box-cat

故事背景

每次看到后台管理项目总是免不了一大串这种函数：

function postCommodity (data){} // 新增商品

function getCommodityList (data){} // 获取商品列表

function getCommodityDetail (id){} // 获取商品详情

function putCommodity (id, data){} // 修改商品详情

function putCommodityStatus (id, status){} // 上下架商品

function deleteCommodity (id){} // 删除商品

复制代码

以上封装函数并且结构相似，但是每次都要手动一对一多的封装函数，代码冗余。

所以我想能不能通过一个json的形式去自动生成接口函数

思路

// store.js

// 接口对象格式

export default {

postCommodity: 'api/commodity',

getCommodityList: 'api/commodity/list',

getCommodityDetail: 'api/commodity/:id',

putCommodity: 'api/commodity/:id',

putCommodityStatus: 'api/commodity/:id/:status',

deleteCommodity: 'api/commodity/:id',

}

复制代码每个字段都会以key为名生成一个请求接口函数，约定在key中进行methods匹配作为内部请求方式(get、post).

用正则切出param路径参数，用调用的参数去代替param进行请求。为了方便传参数，当只有一个param参数时，我们只需要getCommodityDetail(1)，当有多个的时候，我们就需要

// 当然一个param参数也可以getCommodityDetail({id: 1})

putCommodityStatus({

id: 1,

status: 0

})

复制代码当然，我们是基于http请求库中再封装一层，所以我们需要在生成请求接口函数的时候，传一个axios又或者flyio之类的库，支持get、post……请求方法。

忠实反映请求库的传参数方式(只当碰到api/commodity/:id这种param，第一个参数才会是param，其他都一样)

// flyio

getCommodityList({

page: 1,

limit: 10

})

// axios

getCommodityList({

params: {

page: 1,

limit: 10

}

})

复制代码

通过匹配key中的method，即get，post内部生成对应的方法

// 对fetch上封装了一层对于store的函数生成

import store from 'store'

import { createApis } from 'box-cat'

const http = createApis(store, fetch)

http.getCommodityList({

page: 1,

limit: 10

})

复制代码

这是一个遍历的生成过程，如果用不到或者还没用的接口也生成的话，在性能上是有消耗的。所以通过es6的 proxy就可以很好的去填补这个痛点。

// 返回Proxy实例，惰性生成接口方法。当判断不支持proxy时，内部会优雅降级为createApi

import { createProxy } from 'box-cat'

const http = createProxy(store, fetch)

复制代码

谢幕

文笔捉鸡，希望对你有帮助，更多用法请点击以下链接

github.com/hengshanMWC…

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[强行震惊！竟然解决了请求接口中的冗余]http://www.zyiz.net/tech/detail-144194.html