文档首页/ 硬件开发工具链平台云服务/ 开发指南/ 流程配置指南/ 流程元模板/ UI编辑操作说明/ 资源管理
更新时间：2024-11-08 GMT+08:00
查看PDF
分享

资源管理

在常规代码开发中，通常会将一些高频率用到的代码片段抽离出来成为公共函数，减少重复的代码，从而达到代码复用的目的。同样，在低代码开发中，不可避免地需要编写一些高代码进行组合开发，这里同样存在存储一些公共函数以供各处调用需求。

工具类方法utils可以将一些可复用的公共函数编写到工具类方法中，供后续调用。如图1所示，UI编辑器内部已经提供了三个内置工具类供用户使用，下文以lcRequest举例说明。

图1 内置工具

lcRequest

内置网络请求工具Axios，因为已添加拦截器和部分参数验证，所以在编辑器内发起请求时，可直接使用此工具。

详细参数类型及使用方法，可参考Axios使用文档，这里给出基础使用方法。

获取请求实例

const request = this.utils.lcRequest();

配置请求参数

// 请求接口Url地址
const url = 'http://www.example.com/api';
// 请求方法 ( get | post | put | delete )
const method = 'get';
// query参数，用于get请求
const params = {
    param1: 'xxx',
    param2: 'xxx',
}
// body请求体，用于其他类型的请求，可包含数组，对象等复杂类型
const body = {
    param1: 'xxx',
    param2: 'xxx',
    arrayParam: ['arrayItem1', 'arrayItem2'],
    objectItem: {
        objectItem1: 'xxx',
        objectItem2: 'xxx'
    }
}
// headers请求头，用于自定义请求的请求头参数
const headers = {
    // 'Accept': 'application/json'
}

发起get请求

// get http://www.example.com/api?param1=xxx&param2=xxx
request.get(url, { params, headers }).then(res => {
    // 调用成功后的逻辑，res为调用成功后的反参
    // ...
}).catch(err => {
    // 调用失败后的逻辑，err为调用失败后的错误信息
    // ...
})

发起post请求

// post http://www.example.com/api
request.post(url, body, { headers }).then(res => {
    // 调用成功后的逻辑，res为调用成功后的反参
    // ...
}).catch(err => {
    // 调用失败后的逻辑，err为调用失败后的错误信息
    // ...
})
父主题： UI编辑操作说明

相关文档