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 
})