等待异步任务可能导致打开弹层慢|飞书低代码平台

搭建场景

有异步任务执行

需要打开弹层/侧拉窗等弹层组件

弹层内要展示的信息是异步任务执行后的结果

搭建建议

先打开弹层

当用户点击按钮/点击行/其他触发方式需要打开弹层时，要先打开弹层，给用户一个点击后的反馈，否则用户会认为按钮坏了 / 没触发成功等，影响用户体验）

常使用 Loading 效果

有异步任务加载时，使用 Loading 效果或者实时同步异步任务加载进度，能够较强的缓解用户焦虑

当出现错误时，给予反馈

异步任务执行失败，可以给出失败原因。这样用户将可以合理的进行反馈，也有助于搭建者快速排查异常之处

搭建实践

如何搭建 Loading 效果

创建页面变量 data_is_loading，初始值为 true

作用是通过该变量来控制组件的显隐

250px|700px|reset

创建页面变量 current_progress，初始值为 '加载中...0%'

作用是给用户进度反馈

250px|700px|reset

Loading 组件

可使用任意组件代替，这里使用文本组件

250px|700px|reset

配置 Loading 组件显隐（数据未加载完成时，显示；数据加载完成时，隐藏）

250px|700px|reset

数据展示组件

可以将所有需要展示的组件放进一个区块组件/表单组件等，对整个区块组件进行显隐控制

250px|700px|reset

配置区块组件显隐（数据未加载完成时，隐藏；数据加载完成时，显示）

250px|700px|reset

这里对整个区块做显隐，比较适合区块内组件不多的场景

对于区块有大量组件的情况下，在显示区块内组件时，区块内的各组件也需要一点加载时间，量大的情况下可能会花费时间。遇到这样的场景时，可以将控制的粒度做的细一点，区块不做显隐控制，使用 Loading 控制区块内较大的组件的显隐

异步任务，以执行 js 代码为例

假设异步任务代码如下

代码中 current_progress 变量的值可根据代码段自行调整进度，也可以根据轮询等方式获取真实的加载进度

/** * 获取页面组件数据 */const xx1 = table_1.currentRow['xx1'];const xx2 = table_1.currentRow['xx2'];const xx3 = table_1.currentRow['xx3'];// 设置页面变量 current_progress 的进度context.pageVar.setValue('current_progress', '加载中...30%');/** * 调用云函数 */const funRes = await application.func.invokeFunction("xx4", {  param1: '',  param2: ''});if (funRes.code !== 0) {  // 异步任务异常，通过设置页面变量 current_progress 的值，反馈用户  context.pageVar.setValue('current_progress', 'xx4失败：失败原因...');  return;}// 设置页面变量 current_progress 的进度context.pageVar.setValue('current_progress', '加载中...50%');/** * 调用对象，获取数据 */const objectRes = await application.data.searchRecords('xx5', {  param1: funRes.data});if (!accountRes || !accountRes.total) {  // 异步任务异常，通过设置页面变量 current_progress 的值，反馈用户  context.pageVar.setValue('current_progress', 'xx5失败：失败原因...');  return;}// 设置页面变量 current_progress 的进度context.pageVar.setValue('current_progress', '加载中...70%');/** * 其他异步任务 * ...... */// 设置页面变量 current_progress 的进度context.pageVar.setValue('current_progress', '加载中...100%');// 设置 Loading 状态，控制 Loading 组件隐藏，数据组件显示context.pageVar.setValue('data_is_loading', false);;