强行震惊！竟然解决了请求接口中的冗余

最新推荐文章于 2023-05-16 16:55:54 发布

weixin_48726650

最新推荐文章于 2023-05-16 16:55:54 发布

阅读量406

点赞数

文章标签： java python js ajax vue

原文链接：https://juejin.im/post/5eddad85f265da77190bc78a

版权

直入主题

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

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…

作者：科目三后吃饭
链接：https://juejin.im/post/5eddad85f265da77190bc78a

服务推荐

weixin_48726650

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
强行震惊！竟然解决了请求接口中的冗余

直入主题一个解决接口冗余的小轮子npm i box-cat故事背景每次看到后台管理项目总是免不了一大串这种函数：function postCommodity (data){} // 新增商品function getCommodityList (data){} // 获取商品列表function getCommodityDetail (id){} // 获取商品详情function putCommodity (id, data){} // 修改商品详情function putCommodi.
复制链接

扫一扫