前端调用服务

在前端页面上可以根据请求的请求地址、请求方法、请求参数发送请求，从而获得请求返回的数据。系统提供四个组件：服务请求组件、网络请求组件、高级网络请求组件、API 请求组件，和一个 API 实现前端调用服务，说明见下表

特别说明

• 不通过服务请求组件调用服务时，请注意请求路径是全小写的，可以打开 gen-java/controller 查看请求路径
• 通过 app.m 可以实现转调，即前端发送同域请求，后端实现跨域转发，参考《网关路由转发》

服务请求组件

系统为实现无代码开发和低代码开发，提供服务请求组件。服务请求组件自带请求地址，可进行参数设置，调用服务请求组件的发送服务请求操作或方法，获取请求返回数据。

例如：在服务中定义查询商品和查询商品2两个请求，如下图所示

在页面的服务组件面板中，产生两个服务请求组件：查询商品和查询商品2，如下图所示

组件属性

组件包括5个属性：服务、参数、参数自动编码、请求数据类型和返回数据类型。

• 服务

这个属性存储的是服务的请求地址，服务请求组件自带服务属性值，无需设置

• 参数设置

设置请求参数中需要调用方传入的参数，例如在请求中定义“商品名称”参数，如下图所示

在服务请求组件的参数设置中，会列出请求中定义的参数，如下图所示

也可以在调用点设置参数，如下图所示

• 参数自动编码

由于一些字符和中文需要编码后，才能发送，系统提供自动编码能力

• 请求数据类型

请求数据类型 Content-Type，在 Http 协议消息头中，使用 Content-Type 来表示请求中的数据类型信息。它用来告诉服务端如何处理请求的数据。

• 返回数据类型

返回数据类型 Data-Type，在 Http 协议消息头中，使用 Data-Type 来表示响应中的数据类型信息。它用来告诉客户端（一般是浏览器）如何解析响应的数据。

主要分为4种类型：json text xml html。返回 JSON 数据就设置为 json，返回普通数据就设置为 text。

组件操作和方法

组件提供一个操作：发送服务请求，用于发送请求以调用服务，如下图所示

组件提供一个方法：send，参数是请求参数，返回 promise，示例代码如下

    onJsServiceBtnClick = async (event) => {
        let productName = this.comp("pageData").getValue("productName");
        let ret = await this.comp("serviceRequest1").send({
            "productName": productName
        })
        console.log(ret);
    }

返回结果输出如下图所示，其中 data 为返回的数据

组件的事件

组件提供4个事件，分别是请求前、请求成功、请求失败和响应进度消息。

• 在请求成功事件中，获得请求返回的数据
• 在请求失败事件中，返回异常数据，从中获取错误信息。使用操作时，写作 $event.data.message，使用代码时，写作 event.data.message
• 响应进度消息，配合响应流模式，参考《响应流模式（执行长时间任务）》

服务数据集

如果希望通过服务返回几条数据，可以设置请求返回为某个数据集的集合。数据集可以是动态数据集，也可以是静态数据集。请求返回的设置如下图所示

调用这个服务，从后端返回 List<数据集>，在前端接收到 JSON 数组。此时可以通过数据组件的 loadData 方法，将 JSON 数组中的内容，加载到数据组件中，规则是 JSON 中的 key 和数据组件中的列标识相同则写入数据。这是通过写代码实现的，系统提供了无代码的方式，服务请求组件添加结果数据集，设计界面如下图所示

调用服务后数据自动写入结果数据集，在页面中使用表格等组件展示结果数据集中的内容，如下图所示

结果数据集是支持分页的，它提供了刷新数据的方法，自动计算要获取的页数，并调用服务请求，获得该页数的相应数据。参考《调用服务返回分页数据》

调用租户内其他应用的服务

IDE 中的高级页面，提供引入租户内其他应用的服务，如下图所示

选择应用和其中的服务

引入后，使用方式同当前应用中的服务

网络请求组件

网络请求组件用于调用同域的请求。对于自定义 controller 的服务，可以使用网络请求组件调用

组件属性

组件包括7个属性：请求地址、动态请求地址、请求类型、请求头、发送数据、请求数据类型和返回数据类型。

• 请求地址、动态请求地址

请求 URL，支持表达式

• 请求类型

请求类型：GET、POST、PUT、DELETE

• 请求头、发送数据

JSON 格式，支持表达式

• 请求数据类型、返回数据类型

同服务请求组件

组件操作和方法

组件提供一个操作：发送请求，用于发送请求以调用服务，如下图所示

组件提供一个方法：send，参数是请求的所有参数，返回 promise，示例代码如下

    onJsRequestBtnClick = async (event) => {
        let productName = this.comp("pageData").getValue("productName");
        let ret = await this.comp("request1").send({
            url:"/main/fuwu/queryproduct2",
            data:{
                "productName": productName
            },
            header:{
                "aaa":"aaa"
            }
        })
        this.comp("retData").loadData(ret.data.data);
        console.log(ret);    
    }

返回结果输出如下图所示，其中 data 为返回的数据

组件的事件

组件提供2个事件：请求成功和请求失败。在请求成功事件中，获取返回的数据，使用数据组件的 loadData 方法，可将返回的数据写入数据组件

高级网络请求组件

高级网络请求组件的属性、操作、方法、事件同网络请求组件一致，比网络请求组件多一个属性：转调跨域请求，这是该组件区别于网络请求组件的地方，该组件支持跨域访问

高级网络请求组件是市场组件，用时先从市场中添加，如下图所示

添加后，出现在组件面板-高级中，显示为“高级请求”，如下图所示

API 请求组件

参考《API 请求组件》

使用 JS 调用

在前端 JS 中访问服务，即可以使用上述3种请求组件，也可以使用页面组件的 request 方法，request 方法定义如下

this.request({
    method: method,//请求方法
    url: url,      //请求地址，支持使用 $serviceName 获取当前服务名
    header:{},     //请求头
    data: data     //请求参数
}).then(res=>{
    res.data       //请求返回的数据
});

示例代码如下

    onJsBtnClick = async (event) => {
        let productName = this.comp("pageData").getValue("productName");
        let ret = await this.request({
            url: "$serviceName/main/fuwu/queryproduct2?productName=" + productName
        })
        console.log(ret);
    }

返回结果输出如下图所示，其中 data 为返回的数据