Axios正常的GET请求进度

Question

我正在尝试做的事情：

我正在使用 Vue And Axios ，我试图在控制台中以百分比显示进度。

问题是：

请求本身需要4秒钟或更长时间，因为它会获取大量数据并将其存储到excel中，然后 下载 。

我尝试过的事情：

我在 Axios 中发现了两种方法：onDownloadProgress和onUploadProgress。

onDownloadProgress函数工作正常，但仅当下载开始时才执行，而后端未将数据提取到excel文件中（这花费了大部分时间）。

这是前端代码：

axios.get(`${env.ENDPOINT}reports/products/credits_export`, {
    params: {
      category_id: form_data.category_id
    },
    responseType: 'blob',
    onDownloadProgress: (progressEvent) => {
      let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      console.log(progressEvent.lengthComputable);
      console.log(percentCompleted);
    }
  }).then((res) => {
    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link = document.createElement('a');
    const file_name = `${new Date().toISOString().slice(0,10)}.xlsx`;
    link.href = url;
    link.setAttribute('download', file_name);
    document.body.appendChild(link);
    link.click();
    resolve(res.data);
  }).catch((e) => {
    reject(e);
  });

夏天：

我的进度将分为两个：

• 下载进度（将使用onDownloadProgress）
• 请求进度（正在准备下载Excel文件）

Answer 1

我们不知道服务器将花费多少时间来响应，所以您无法在该时间点显示进度条的百分比；如果是流数据，我们可以显示进度，为此模拟这种效果，然后再显示进度条的呼叫设置状态，然后将其随机放入设置的Interval方法中，然后在重新获得响应后重新计算并从该点继续进度状态。

this.progress =true;
let interval = setInterval(()=>{
this.progressPercentage = randomFunction()
 // some random calculation for progress
},500)
axios.get(url)
.then(()=>{
   clearInterval(interval);
   // User your progress event object 
})