Ant Design Pro: 请求接口函数复用

简介: Ant Design Pro: 请求接口函数复用

先看代码,如下:

export async function list(url, params, token) {
  return request(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'multipart/form-data',
      'Authori-zation': `Bearer ${token}`,
    },
    params: params,
  });
}

以上就是一个表格列表可以复用的请求函数,因为它的形式是固定的,并且因为几乎每个页面都需要请求表格列表的接口,所以只需要通过传参,传递一个接口的url,和请求参数的对象即可达到复用的效果。

  • 而其它类的,例如:修改状态的开关
export async function switchStatus(url, token) {
  return request(url, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authori-zation': `Bearer ${token}`,
    },
  });
}

具体形式应当根据接口进行变化,此crmeb项目的接口的修改状态的接口请求的是一个路径后拼接一个要修改状态的id,和要修改的状态。

这点工作可以通过函数多传两个参数来完成,也可以通过在调用此请求时直接在url后拼接当前点击开关的那一项的id与status,如下:

     {
       title: '状态',
       dataIndex: 'status',
       render: (item, row, index) => {
          return (
            <Switch
                size={`small`}
                checkedChildren={`显示`}
                unCheckedChildren={`隐藏`}
                defaultChecked={item === 1}
                onChange={(checked) => {
                  switchStatus(//switchStatus为修改状态的请求函数
                `http/${row.id}/${
                          checked ? 1 : 0
                        }`,
                        token,
                      ).then((res) => {
                        if (res.status === 200) {
                          message.success(res.msg);
                        } else {
                          message.error(`修改失败`);
                        }
                      });
                    }}
                  />
                );
              },
            },

剩余的添加、编辑等都与此大致相同。


如此一来,整个项目的都只需要调用此文件中的几个类型(列表、添加、删除、编辑、开关)的请求函数即可完成整个项目的请求需求。


这不仅仅局限于后台管理系统类的项目的复用接口函数。


这其实是一种复用的思想,能够达到复用目的减少代码量,增加开发效率与后续的可维护性。


相关文章
|
JavaScript 前端开发
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
文章的总结目标实际上就是一个前端pdf打印组件,由於能在往后的其他项目中得以快速上手,并能根据所在项目需要快速自定义扩展,因此組件非常简陋直白,文章是实践过程的记录产物,并不保证完全正确,仅作参考。
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
|
索引
antd a-table表格添加序号和分页总数——基础积累
antd a-table表格添加序号和分页总数——基础积累
1131 0
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
1882 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
antd table合并行或者列(动态添加合并行、列)
在Ant Design的Table组件中实现行或列的合并,通过动态计算数据源中的`rowSpan`或`colSpan`属性来控制,支持对特定字段进行行或列合并,包括多选框列的合并处理。
1585 3
antd table合并行或者列(动态添加合并行、列)
|
API 数据库
基于jeecgboot流程管理平台的在线表单设计修改成formdesigner(一)
基于jeecgboot流程管理平台的在线表单设计修改成formdesigner(一)
301 1
|
监控 安全 Java
老程序员分享:JeeSite快速开发平台、功能介绍、用户权限、数据权限、系统管理
老程序员分享:JeeSite快速开发平台、功能介绍、用户权限、数据权限、系统管理
486 0
|
人工智能 边缘计算 vr&ar
移动应用与系统的未来:技术融合与创新驱动
移动应用和操作系统的发展不仅改变了我们的日常生活,还在不断推动技术前沿的演进。本文从移动应用开发的最新趋势、移动操作系统的演化、以及两者间的深度融合出发,探讨未来移动科技的创新方向。通过具体案例和技术分析,揭示当前移动生态系统中最具潜力的领域,并展望其未来发展路径。
171 32
|
测试技术 Nacos Docker
xxl任务绑定一台服务器的两个项目
项目需在测试和生产环境自动注册到xxl服务。之前测试环境未注册,且手动注册。解决方案:修改xxl.nacos配置,设置xxl.job.executor.ip为特定IP,避免自动注册错误的IP。因同一机器上运行两个项目,需分配不同端口,如测试环境设为9997,并在docker运行命令中映射该端口。最后在阿里云开放9997端口并重启服务,实现自动注册。
170 1
|
负载均衡 监控 Cloud Native
FinOps
“【5月更文挑战第25天】”
449 5