vue进度条异步请求

Question

vue页面上有一个需求，点击文件的名称就能自动弹出浏览器那个保存文件的窗口，然后选好下载路径，文件就会下载，进度显示在浏览器的左下角（我的Chrome是这样的）
但是感觉不太直观，万一客户没看到重复点击，浏览器的窗口会一直弹出，影响使用感受，所以添加一个进度条，查了一下element-ui里面有个el-progress，使用了，但是有几个对于小菜来说的难点
思路是点击文件——浏览器弹出窗口，选择保存路径，点击保存——页面中间出现实时进度条，下载期间不能进行其他操作，下载后有个类似于message的弹窗提示“文件下载完成”
进度条的出现设定了一个变量showProgress，点击下载的时候等于true，下载完毕关闭弹窗，每次点开的时候都是false，但是现在进度条比浏览器的窗口出来的快，这个是要用到异步axios吗？
怎么才能让进度条最后出现呢？怎么让文件的下载跟进度条同步呢？？
请教一下各位！

Answer 1

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
    <el-progress v-if="showProgress" :percentage="progress" :status="progressStatus"></el-progress>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  data() {
    return {
      showProgress: false,
      progress: 0,
      progressStatus: 'success',
    }
  },
  methods: {
    downloadFile() {
      this.showProgress = true;
      axios({
        url: 'url_to_your_file',
        method: 'GET',
        responseType: 'blob', // This is important
        onDownloadProgress: (progressEvent) => {
          // Calculate the percentage
          this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        },
      })
      .then((response) => {
        // Create a blob link
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file_name');
        document.body.appendChild(link);
        link.click();
        // Notify the user
        ElMessage.success('文件下载完成！');
        this.showProgress = false;
      })
      .catch((error) => {