使用UI引擎中的预置工具类

前提条件

已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。

添加预置工具类“dsHttp”

按照以下步骤将“dsHttp”添加为“npm”类型工具类，配置参数为固定值，无需自定义调整。

1. 在页面设计器的左侧插件功能区，单击，展开“资源管理”面板。
2. 单击上方的，展开“添加工具类”页面。
3. 在展开的“添加工具类”页面，设置如下主要信息，其他参数保持默认设置，单击“保存”。
   图1 添加预置工具类“dsHttp”
   

   表1 “dsHttp”工具类配置信息

   参数名称	参数说明
   工具类型	此处选择“npm”。
   工具名称	用户自定义，如“dsHttp”。
   npm包名	填写为“@basic-lowcode-components”。
   npm包名导出名	填写为“lcShared”。
   解构npm包	保持默认，勾选此配置项。

使用预置工具类“dsHttp”

dsHttp支持多种HTTP请求方法，适配工业场景下查询、提交、删除、上传等各类接口需求，调用语法统一，参数灵活适配不同业务场景。

• 基本调用语法：

  this.utils.lcShared?.dsHttp?.method(“数据源ID”,“/path”, ...“args”)

• 参数说明：

  表2 dsHttp参数说明

  参数	是否必填	说明
  method	必填	请求方法，需替换为实际请求方法的名称。详情请参见支持的请求方法。
  数据源ID	必填	表示当前数据源组件所绑定的数据源ID。可前往“数据源管理”页面查看。
  path	必填	表示请求的地址。通常为“XDM模型组件”配置“数据源来源”时，“数据源配置”中“选择API”参数对应的值。
  args	可选	附加参数，不同方法有不同要求。详情请参见支持的请求方法。

支持的请求方法

表3列出dsHttp支持的所有请求方法，含参数要求、工业场景适配说明及示例，其中postForm/putForm专为表单提交、设备文件上传场景设计。

config

this.utils.lcShared?.dsHttp.get('1', '/path')

config

this.utils.lcShared?.dsHttp.delete('1', '/path')

data, config

this.utils.lcShared?.dsHttp.post('1', '/path', { id: 'xxx' })

data, config

this.utils.lcShared?.dsHttp.put('1', '/path', { id: 'xxx' })

data, config

this.utils.lcShared?.dsHttp.postForm('1', '/path', {
  my_field: 'my_value',
  my_file: fileInput.files,
  my_buffer: new Blob([1, 2, 3])
})

data, config

this.utils.lcShared?.dsHttp.putForm('1', '/path', {
  my_field: 'my_value',
  my_file: fileInput.files,
  my_buffer: new Blob([1, 2, 3])
})