Отменить несколько задач загрузки

Я пытаюсь отправить задачи загрузки в массив и отменить их по щелчку, но кажется, что отправленные задачи недоступны во внешней области.

  let downloadTasks: StatefulPromise<FetchBlobResponse>[] = [];

Начать загрузку

const handleDownloadOfflineData = async () => {
    try {
          await Promise.all(
            uniqueMediaFiles.map((media, i) => {

              const task = ReactNativeBlobUtil.config({
                path: `${cacheDir}/${INTERACTIVE_TOUR_DIR}/${oneInteractiveTourDetailsMobile.id}/media/${media.bucketPath}`,
              })
                .fetch('GET', `${BUCKET_PATH}${media.bucketPath}`)
                .progress((received, total) => {
                  //..
                  console.info('Progress: ', received / total);
                });
              downloadTasks.push(task); //Push the task
              console.info('PUSH TASK: ', downloadTasks.length);
              return task;
            }),
          ).then(async _responses => {
            //..
          });
    } catch (err) {
      //..
    }
  };

Отменить задачи


  const handleCancelDownload = async () => {
    console.info('CANCEL TASKS: ', downloadTasks.length);
    downloadTasks.forEach(task => {
      task.cancel();
    });
  };

Когда я нажимаю кнопку для отмены задач после начала загрузки, я получаю это из журналов консоли.

PUSH TASK:  1
PUSH TASK:  2
PUSH TASK:  3
PUSH TASK:  4
PUSH TASK:  5
PUSH TASK:  6
Progress:  1
Progress:  1
Progress:  1
Progress:  1
Progress:  1
Progress:  0.0023231438670363127
CANCEL TASKS:  0

Как видите, задачи помещаются в массив, но в функции отмены загрузок массив по-прежнему пуст, и я не могу их отменить.

Как заставить это работать?

мой прогресс загрузки не сохраняется, в случае нескольких загрузок он мерцает в индикаторе выполнения, также я не смог найти решение, чтобы остановить его.

— 24.04.2023 14:07

@Digamber negi Проверьте мой ответ, в конце концов мне удалось его исправить. Отмена задач и многократных загрузок работает нормально. Существует ошибка, из-за которой последний прогресс последнего загружаемого элемента не обновляется, но легкое исправление состоит в том, чтобы просто принудительно установить прогресс на 100% после того, как все будет загружено. Кроме того, прогресс рассчитывается правильно, поскольку он сообщает об общем загруженном размере, а не о том, сколько было загружено с последнего обновления.

— 24.04.2023 14:16

javascript react-native promise

03.04.2023 12:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мне удалось это сделать, изменив переменную downloadTasks на ref:

const downloadTasks = useRef<StatefulPromise<FetchBlobResponse>[]>([]);


const handleDownloadOfflineData = async () => {
    try {
          await Promise.all(
            uniqueMediaFiles.map((media, i) => {
              let lastReceived = 0;
              const task = ReactNativeBlobUtil.config({
                path: `${cacheDir}/${INTERACTIVE_TOUR_DIR}/${oneInteractiveTourDetailsMobile.id}/media/${media.bucketPath}`,
              })
                .fetch('GET', `${BUCKET_PATH}${media.bucketPath}`)
                .progress((received, total) => {
                  setDownloadedProgress(prev => {
                  return prev + Number(received) - lastReceived;
                });
                lastReceived = Number(received);
                });
              downloadTasks.current = [...downloadTasks.current, task];
              console.info('PUSH TASK: ', downloadTasks.length);
              return task;
            }),
          ).then(async _responses => {
            setHasDownloadedContent(true);
            setIsOfflineContentUpToDate(true);
            setIsDownloading(false);
            setDownloadedProgress(totalDownloadSize); //Fixes missing progress for last file
          });
    } catch (err) {
      //..
    }
  };

 const handleCancelDownload = async () => {
    try {
      downloadTasks.current.forEach(task => {
        task.cancel();
      });
      downloadTasks.current = [];
      setDownloadedProgress(0);
      setHasDownloadedContent(false);
      setIsOfflineContentUpToDate(undefined);

      const path = `${ReactNativeBlobUtil.fs.dirs.CacheDir}/${INTERACTIVE_TOUR_DIR}/${data?.oneInteractiveTourDetailsMobile.id}_${contentLocale}`;
      if (!(await ReactNativeBlobUtil.fs.exists(path))) {
        return;
      }
      await ReactNativeBlobUtil.fs.unlink(path);
    } catch (err) {
      Toast.show({
        text1: t('toast.error.deleteDownloadFailed'),
        text2: t('toast.error.deleteDownloadFailed.tryOptions'),
        type: 'error',
      });
    }
  };

позвольте мне попробовать, может ли это сработать

— 24.04.2023 18:50

24.04.2023 14:15