Flutter中异步任务执行时显示加载组件、完成后展示结果组件的实现方法

核心逻辑流程 #

• 触发数据拉取操作后，首先调用全局弹窗方法展示加载状态Dialog，注意这个Dialog要设置为不可手动关闭，避免用户误操作中断状态展示
• 启动异步数据库查询任务，查询逻辑要放在独立的协程/异步线程中执行，不要阻塞主线程导致UI卡顿
• 异步任务执行完成后，首先执行关闭操作销毁加载状态Dialog
• 拿到返回的数据集做基本非空/异常校验：
  • 如果查询报错，可优先弹出错误提示Dialog，告知用户失败原因
  • 如果查询正常，直接初始化数据展示Dialog，传入获取到的数据集后调用展示方法弹出

注意事项 #

• 异步任务执行过程中如果用户主动退出当前页面，要同时销毁未完成的异步任务+关闭加载Dialog，避免出现内存泄露或者窗口泄漏报错
• 加载Dialog不要重复实例化，每次调用展示方法前检查实例是否已存在、是否正在展示

代码示例（Android Kotlin 协程实现） #

// 1. 初始化加载Dialog
val loadingDialog = LoadingDialog(context).apply {
    setCancelable(false)
    setCanceledOnTouchOutside(false)
}

// 2. 触发拉取操作的逻辑
fun loadDataFromDB() {
    // 展示加载弹窗
    loadingDialog.show()
    // 启动IO线程执行数据库查询
    lifecycleScope.launch(Dispatchers.IO) {
        val result = userDao.queryAllUserList() // 数据库查询操作
        // 切回主线程处理UI
        withContext(Dispatchers.Main) {
            // 关闭加载弹窗
            if (loadingDialog.isShowing) loadingDialog.dismiss()
            // 弹出数据展示弹窗
            DataShowDialog(context, result).show()
        }
    }
}

代码示例（前端Vue3实现） #

<script setup>
import { ref } from 'vue'
import { ElLoading, ElDialog } from 'element-plus'
import { queryAllDataFromDB } from '@/api/db'

const showDataDialog = ref(false)
const dataList = ref([])

const handleLoadData = async () => {
  // 打开加载遮罩弹窗
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '数据拉取中...',
  })
  try {
    // 异步拉取数据
    const res = await queryAllDataFromDB()
    dataList.value = res.data
  } catch (err) {
    console.error('数据查询失败', err)
  } finally {
    // 关闭加载遮罩
    loadingInstance.close()
    // 打开数据展示弹窗
    showDataDialog.value = true
  }
}
</script>

<template>
  <el-button @click="handleLoadData">拉取数据库数据</el-button>
  <ElDialog v-model="showDataDialog" title="数据列表" width="60%">
    <div v-for="item in dataList" :key="item.id">{{ item.content }}</div>
  </ElDialog>
</template>

内容的提问来源于stack exchange，提问作者Joel