API 请求组件

系统支持将 OpenAPI 封装成 API 组件，通过网关转调，实现页面上的跨域访问。用于在页面上调用第三方 OpenAPI 服务和其他租户对外暴露的服务。

添加 API

• 在控制台的 API 市场中上传 API，参考《用户手册-API管理》
• 在 IDE 的 API 面板中添加 API

• 添加 API 后，在 service/importapi 模块中，产生 xxx.api.json，如下图所示

• 在页面上，看到这些 API，就可以访问了

组件属性

组件提供3个属性：参数、发送数据、请求头。

• 参数

参数属性可以在 API 请求组件上设置，也可以在调用时设置。

• 发送数据、请求头

JSON 格式，支持表达式

组件操作、方法

组件提供一个操作：发送请求，如下图所示，发送请求并设置请求参数

组件提供一个方法：发送请求 send，发送请求并设置请求参数，示例代码如下

    onApiBtnClick = (event) => {
        this.comp("apiRequestFindByStatus").send({"status":"available"})
    }

api 请求 send 方法包含：

• params：请求参数内容
• data：请求体
• header：请求头

组件事件

组件提供3个事件：请求前、请求成功和请求失败。在请求成功中返回接口数据，如下图所示，在请求失败事件中，获取错误信息

使用长整型

支持 API 请求返回长整型数据，例如：{"id":1630506494485204992}，做法是将长整型转换为字符串，因此数据组件中 id 列的类型不要设置为长整型，要设置为文本

下载文件

如果 API 请求返回文件流，在 API 请求组件的请求成功事件中，调用组件提供的下载文件操作下载返回的文件。设置如下图所示

• 请求头必须设置 {responseType: "blob"}
• 文件名设置优先，不设置从 header 中获取

上传文件

如果 API 请求是要上传文件，可以使用附件组件显示一个上传按钮，点击上传按钮，显示打开对话框。

• 桌面端使用附件组件，在附件组件的上传前事件中，获取上传的文件对象，创建 formData，作为 API 请求的参数。

代码如下：

//附件组件的上传前事件
onUpload0BeforeUpload(event){
    //获取上传的文件
    let file = event.data.file;
    this.uploadFile(file); 
}
uploadFile(file){
    //创建formData
    var formData = new FormData();
    //参数名要和 openAPI 里面定义的相同
    formData.append("file", file);
    //调用 api 请求组件的发送方法，第二个参数是body
    let apiRequest = this.comp("apiRequest0");
    apiRequest.send(null, formData);
}

• 移动端使用附件上传组件，在选择文件后事件中，获取上传的文件对象，创建 formData，作为 API 请求的参数。

//附件上传组件的选择文件后事件
onUploader0BeforeRead = (event) => {
    //获取上传的文件
    let file = event.detail.file[0].originalFileObj;
    //参考桌面端示例中的代码
    this.uploadFile(file); 
}