vue开发实现虚假进度条

业务需求：

        调后端接口实现压缩文件夹下载功能，需要在调接口的期间（这可能需要一段时间），提供一个假的进度条提升用户体验，在接口调成功后，进度条变为100%，加载成功

实现思路：

1. 使用组件库的弹框组件和进度条组件
2. .在调用接口前，打开弹框
3. 进度条从0开始，使用定时器，每隔一段时间，增加进度条的值
4. 当进度条达到99以后，清除定时器，不再增加进度条的值（目的是等待接口调用完成）
5. 接口调用完成后，进度条的值设置到百分百，清除定时器（考虑进度条还未达到99时就已经接口调用完成的情况）。使用定时器一秒钟之后关闭弹窗，同时将进度条的值设置为0（方便下次使用）

实现代码（使用的是antd组件库）：

弹出框进度条代码：

<a-modal
:maskClosable="false"
title="压缩下载中..."
v-model:visible="downloadTip"
:footer="null"
>
  <a-progress :percent="progress" />
</a-modal>

实现逻辑：

const downloadTip = ref(false);
// 压缩下载
const downloadAll = () => {
  downloadTip.value = true
  const interval = setInterval(() => {
    if (progress.value >= 98) {
      clearInterval(interval)
      progress.value = 99 // 设置为 100% 当接口完成后
    } else {
      progress.value += 2 // 每次增加进度
    }
  }, 200) // 每 200 毫秒增加进度
    //调接口的逻辑
  调接口的方法(接口所需参数).then(res => {
    //处理接口的数据逻辑
  }).finally(() => {
    loading.value = false
    clearInterval(interval)//清除定时器
    progress.value = 100//进度条为100
    setTimeout(() => {
      downloadTip.value = false
      progress.value = 0
    }, 1000)//1秒之后关闭弹出框，进度条恢复为0
  })
}

实现效果：