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(`修改失败`);
                        }
                      });
                    }}
                  />
                );
              },
            },

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


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


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


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


相关文章
Ant Design Pro:如何进行网络请求
Ant Design Pro:如何进行网络请求
212 0
|
前端开发 JavaScript
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
1276 0
【Ant Design Pro】使用ant design pro做为你的开发模板(一)拉取项目
|
开发工具 git
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
722 0
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
|
3月前
|
人工智能 小程序 编译器
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件(functional-mini)来确保组件逻辑适配到双端,如何实现
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件(functional-mini)来确保组件逻辑适配到双端,如何实现
|
3月前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
106 1
|
缓存 JavaScript 安全
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
1386 0
【Ant Design Pro】使用ant design pro做为你的开发模板(四) 联调正式后台接口与运行时全局配置
|
前端开发
ant design tabCard封装
ant design tabCard封装
75 0
|
前端开发
ant design封装一个弹框组件
ant design封装一个弹框组件
110 0
|
API
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
844 0
【Ant Design Pro】使用ant design pro做为你的开发模板(九)开发第一个完整的后台页面(二)
Ant Design pro删除模块笔记(二)
Ant Design pro删除模块笔记(二)
89 0