API请求组件

场景描述

提供调用外部openapi服务组件

实现思路

在API市场添加要调用的API，在应用中引入添加的API，即可调用外部API

注：此组件目前只支持移动端和桌面端（pcx）使用

操作步骤

添加API

1. 在API市场添加API
2. 打开添加API页面，选择API分类、API名称、API地址、上传api文档、API封面。例如：下图为PetstoreAPI，API地址为：https://petstore3.swagger.io/api/v3，api文档上传.jsonapi文档

1. 内容填写完成后，提交审核，审核完成后即可在租户中添加API

调用API

1. 应用中点击➕号添加api服务!

1. 添加后在API中会显示添加的服务，展开下拉箭头，会显示出当前服务下提供的接口

2. 选择服务下的接口添加到页面上，如图为swagger服务下的Finds Pets by status接口服务

1. 组件有提供设置发送数据、请求头基础属性

2. 组件提供发送请求操作，如图在按钮事件中发送请求并设置请求参数

1. 组件提供请求前、请求成功、请求失败事件，如图在请求成功中返回接口数据

使用长整型

支持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); 
}