remote/zion

交互接口:远程调用


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

表格配置中的 columns 属性

data Array

表格已经加载好的二维数据信息

Returns:

特殊结构处理表格渲染专用

Type
Promise.<T>

(async, static) asyncAssist(assist, reference, state) → {Promise.<T>}

「标准」Ux.asyncAssist

新版的 assist 对应 ajax 解析专用函数,主要用于解析assist配置专用。

  1. 每一个assist都是一个Object配置,键会生成最终的assist数据。
  2. assist应用于很多地方的字典解析部分,如DATUM渲染,所以每一个元素的配置最终都会生成数据。
  3. 早期版本中包含了Assist / Tabular两种。
    1. Assist生成的变量名为:属性:a.x,那么变量名为:$a_a_x
    2. Tabular生成的变量名为:属性:a.x,那么变量名为:$t_a_x
  4. 最终构造的数据是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的解析逻辑:

  1. 响应数据必须是一个Object类型,然后读取response[data]的数据。
  2. 如果读取的数据是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"
    ]
}

返回的数据结构:

  1. 如果成功:直接返回 params 相关信息
  2. 如果失败:调用 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>