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

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

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

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

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