更新时间:2024-02-26 GMT+08:00
分享

资源管理

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

工具类方法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为调用失败后的错误信息
    // ...
})
分享:

    相关文档

    相关产品