交互接口:远程调用
Methods
(async, static) ajaxEager(reference, columns, data) → {Promise.<T>}
「引擎」Ux.ajaxEager
异步表格列渲染专用预处理函数。在表格渲染中,如果使用了字典如:
字典配置
[
{
"key": "9db923a3-e13b-4e4f-b468-8f026c9aa1ab",
"name": "测试标签"
},
{
"key": "72180b29-8c33-4419-a312-405d66a67521",
"name": "正式标签"
},
{
"key": "1dd8ff65-b570-483d-a98d-fe987fd25c03",
"name": "特殊标签"
}
]
上述结构中,表格列里存储的数据是 key,而不是 name,但在表格呈现时需要呈现 name字段的信息,这种情况下需要执行 ajaxEager 进行预处理。如配置和数据分别如下:
config 配置
[
{
"dataIndex": "labelKey",
"title": "标签",
"$render": "USER",
"$config": {
"uri": "异步专用Ajax",
"expr": "呈现专用表达式",
"field": "name,读取数据中需要解析的字段"
}
}
]
data 数据
[
{ labelKey:"9db923a3-e13b-4e4f-b468-8f026c9aa1ab", name:"记录1" },
{ labelKey:"9db923a3-e13b-4e4f-b468-8f026c9aa1ab", name:"记录2" },
{ labelKey:"72180b29-8c33-4419-a312-405d66a67521", name:"记录3" },
{ labelKey:"9db923a3-e13b-4e4f-b468-8f026c9aa1ab", name:"记录4" },
{ labelKey:"72180b29-8c33-4419-a312-405d66a67521", name:"记录5" },
{ labelKey:"72180b29-8c33-4419-a312-405d66a67521", name:"记录6" },
{ labelKey:"72180b29-8c33-4419-a312-405d66a67521", name:"记录7" },
{ labelKey:"72180b29-8c33-4419-a312-405d66a67521", name:"记录8" }
]
核心分析
上述数据中,只有两类labelKey
出现,如果表格的每个单元格都调用 Ajax 异步处理数据,那么上述数据会执行8
次异步访问记录
而 ajaxEager
函数就是为这种情况量身打造的异步渲染函数,如果调用ajaxEager
则只会访问两次,通过这种方式在一页呈现数据
量大的时候会大规模减少和服务端的交互,为了性能考虑,可以使用这个函数来实现,上述例子中最终函数会返回如下数据格式。
{
"9db923a3-e13b-4e4f-b468-8f026c9aa1ab": "测试标签",
"72180b29-8c33-4419-a312-405d66a67521": "正式标签"
}
上述结构是当前页的数据中的数据,特殊标签
由于在本页数据中没使用,所以不会读取到,ajaxEager函数主要的实现考虑有两点:
- 减少和服务端交互的次数,根据本页数据直接分页构造分组型请求。
- 减少所需数据量,只读取合法字典中的数据。
Parameters:
Name | Type | Description |
---|---|---|
reference |
Object | 【保留】React组件引用 |
columns |
Array | 表格配置中的 |
data |
Array | 表格已经加载好的二维数据信息 |
Returns:
特殊结构处理表格渲染专用
- Type
- Promise.<T>
(async, static) asyncAssist(assist, reference, state) → {Promise.<T>}
「标准」Ux.asyncAssist
新版的 assist 对应 ajax 解析专用函数,主要用于解析assist配置专用。
- 每一个assist都是一个Object配置,键会生成最终的assist数据。
- assist应用于很多地方的字典解析部分,如DATUM渲染,所以每一个元素的配置最终都会生成数据。
- 早期版本中包含了Assist / Tabular两种。
- Assist生成的变量名为:属性:
a.x
,那么变量名为:$a_a_x
。 - Tabular生成的变量名为:属性:
a.x
,那么变量名为:$t_a_x
。
- Assist生成的变量名为:属性:
- 最终构造的数据是DataArray类型。
响应处理器
该场景使用不多,也可忽略,直接以Assist配置为主就好。
新版的最后环节执行了响应处理器,可分组数据,可检索,可排序相关内容,这些内容作为Assist专用,详细内容参考seekData
的源代码,
此处不做说明。(略)
参考配置
"_assist": {
"my.todo": {
"uri": "/api/todo/search",
"method": "POST",
"magic": {
"status,i": "ENUM:PENDING",
"sigma": "PROP:app.sigma",
"":"OPERATOR:AND"
},
"qr":true
},
"my.circle": {
"uri": "/api/circle/search",
"method": "POST",
"magic": {
"owner": "USER:key"
},
"qr":true
}
},
Parameters:
Name | Type | Description |
---|---|---|
assist |
Object | 辅助数据配置信息。 |
reference |
Object | ReactComponent | React对应组件引用。 |
state |
Object | 处理的状态数据信息。 |
Returns:
返回Promise。
- Type
- Promise.<T>
(async, static) asyncMagic(config, reference) → {Promise.<T>}
「标准」Ux.asyncMagic
新版的 magic 对应 ajax 解析专用函数,该函数用于配置信息读取,在不同配置中执行核心解析,config中的magic
数据结构如:
{
"field1": "expression1",
"field2": "expression2",
"...": "..."
}
解析流程可参考parseInput
的API说明,除开magic
数据以外剩余数据配置如:
{
"uri": "访问Ajax的路径",
"method": "默认为GET方法",
"response": {
"key": "数据提取的主键字段信,如果带有该字段,则给Array追加主键字段",
"data": "数据字段,如果有该配置,解析响应数据。"
}
}
响应配置是后期加的新配置,该新配置会在很多场景中使用,主要用于响应数据本身格式的转换和解析,Zero Ui中的标准格式如:
{
"data": "Object|Array"
}
实际上response的配置是一个附加流程,如果不存在,则直接返回响应数据,如果存在则返回response的解析逻辑。
最后整理一下response的解析逻辑:
- 响应数据必须是一个Object类型,然后读取
response[data]
的数据。 - 如果读取的数据是Array,并且又配置了
key
属性,为不带key属性的元素设置key=field
的数据为主键属性。
Parameters:
Name | Type | Description |
---|---|---|
config |
Object | 包含了 magic 配置的异步函数。 |
reference |
Object | ReactComponent | React对应组件引用。 |
Returns:
返回Promise。
- Type
- Promise.<T>
(async, static) asyncValidate(config, params, reference) → {Promise.<T>}
「标准」Ux.asyncValidate
标准函数,用于执行 async-validator
的验证,config的数据结构如下
{
"field1": [
"rule1",
"rule2"
],
"field2": [
"rule1",
"rule2"
]
}
返回的数据结构:
- 如果成功:直接返回 params 相关信息
- 如果失败:调用 Promise.reject 方式返回
失败返回的数据结构:
{ "errors": [ { "message": "xxxx", "field": "" } ], "failure": false, "data": "errors[1].message消息值" }
Parameters:
Name | Type | Description |
---|---|---|
config |
Object | 验证专用配置 |
params |
Object | 待验证的数据信息 |
reference |
reference | 传入部分的数据 |
Returns:
返回异步专用的 Promise
- Type
- Promise.<T>