# 使用UI引擎中的预置工具类
UI引擎内置了基于axios封装的预置请求工具"dsHttp"，专为数据源组件（数据源表单、数据源表格）设计，可快速实现与后端接口的联动请求，适配工业场景下设备数据查询、工艺参数提交、表单数据同步等需求。
使用前需先将"dsHttp"添加至工具类，本文将详细介绍添加流程与使用方法。
#### 前提条件
已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。
#### 添加预置工具类"dsHttp"
按照以下步骤将"dsHttp"添加为"npm"类型工具类，配置参数为固定值，无需自定义调整。
1. 在页面设计器的左侧插件功能区，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501128758.png)，展开"资源管理"面板。
2. 单击上方的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500968906.png)，展开"添加工具类"页面。
3. 在展开的"添加工具类"页面，设置如下主要信息，其他参数保持默认设置，单击"保存"。 
   图1添加预置工具类"dsHttp"   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532888815.png "点击放大")
   表1"dsHttp"工具类配置信息 
   | 参数名称     | 参数说明                            |
   |:---|:---|
   | 工具类型     | 此处选择"npm"。                      |
   | 工具名称     | 用户自定义，如"dsHttp"。                |
   | npm包名    | 填写为"@basic-lowcode-components"。 |
   | npm包名导出名 | 填写为"lcShared"。                  |
   | 解构npm包   | 保持默认，勾选此配置项。                    |
      
   
   
 
#### 使用预置工具类"dsHttp"
dsHttp支持多种HTTP请求方法，适配工业场景下查询、提交、删除、上传等各类接口需求，调用语法统一，参数灵活适配不同业务场景。
- 基本调用语法：
  ```
  this.utils.lcShared?.dsHttp?.method(“数据源ID”,“/path”, ...“args”)
  ```
  
- 参数说明：
  表2dsHttp参数说明 
  | 参数     | 是否必填 | 说明                                                                                     |
  |:---|:---|:---|
  | method | 必填   | 请求方法，需替换为实际请求方法的名称。详情请参见[支持的请求方法]。 |
  | 数据源ID  | 必填   | 表示当前数据源组件所绑定的数据源ID。可前往"数据源管理"页面查看。                                                     |
  | path   | 必填   | 表示请求的地址。通常为"XDM模型组件"配置"数据源来源"时，"数据源配置"中"选择API"参数对应的值。                                  |
  | args   | 可选   | 附加参数，不同方法有不同要求。详情请参见[支持的请求方法]。     |
     
  
 
 #### 支持的请求方法
[表3]列出dsHttp支持的所有请求方法，含参数要求、工业场景适配说明及示例，其中postForm/putForm专为表单提交、设备文件上传场景设计。
 表3支持的方法及参数说明 
| 方法（method） | 参数                   | 是否必填 | 参数类型                                                                                                                                                                                                                                                                                      | 说明                                                     | 示例                                                                                                                                             |
|:---|:---|:---|:---|:---|:---|
| get        | ``` config ```       | 否    | AxiosRequestConfig                                                                                                                                                                                                                                                                        | 请求的配置项。如果需要发送额外数据，需配置在"config"之前。如果数据为空，需传一个空对象"{}"占位。 | ``` this.utils.lcShared?.dsHttp.get('1', '/path') ```                                                                                          |
| delete     | ``` config ```       | 否    | AxiosRequestConfig                                                                                                                                                                                                                                                                        | 删除操作的配置项。                                              | ``` this.utils.lcShared?.dsHttp.delete('1', '/path') ```                                                                                       |
| post       | ``` data, config ``` | 均否   | - data: Any  - config: AxiosRequestConfig    | 发送POST请求时的数据和配置项。                                      | ``` this.utils.lcShared?.dsHttp.post('1', '/path', { id: 'xxx' }) ```                                                                          |
| put        | ``` data, config ``` | 均否   | - data: Any  - config: AxiosRequestConfig    | 发送PUT请求时的数据和配置项。                                       | ``` this.utils.lcShared?.dsHttp.put('1', '/path', { id: 'xxx' }) ```                                                                           |
| postForm   | ``` data, config ``` | 均否   | - data: Object  - config: AxiosRequestConfig   | 将对象转换为"FormData"并发送POST请求。                             | ``` this.utils.lcShared?.dsHttp.postForm('1', '/path', { my_field: 'my_value', my_file: fileInput.files, my_buffer: new Blob([1, 2, 3]) }) ``` |
| putForm    | ``` data, config ``` | 均否   | - data: Object  - config: AxiosRequestConfig   | 将对象转换为"FormData"并发送PUT请求。                              | ``` this.utils.lcShared?.dsHttp.putForm('1', '/path', { my_field: 'my_value', my_file: fileInput.files, my_buffer: new Blob([1, 2, 3]) }) ```  |