Прервать множество xhr-запросов на сервер

Question

Суть такова, для отправки больших объёмов информации, я делю файл на части и отправляю на сервер, соответственно, каждым запросом - одну часть, таким образом минуя ограничение сервера на размер передаваемых файлов. Вопрос, как можно прервать все эти запросы, если пользователь решил отменить загрузку?

const request = new XMLHttpRequest();
const url = "https://example.com/postDataToDB.php";

function request(chunk) {
  const formData = new FormData();
  formData.append("newFile", chunk);
  request.open("POST", url, true); //работает в асинхроне
  request.send(formData);
}

function cancel() { //отмена
  request.abort(); //не работает, т.к. судя по всему, прерывает только один запрос.
}

function createForm(files) { //деление файлов на части
  const BYTES_PER_CHUNK = 1024 * 1024 * 30;
  const lengthFiles = Object.keys(files).length; //колво файлов

  for (let i = 0; i < lengthFiles; i++) {
    const SIZE = files[i].size;
    let start = 0;
    let end = BYTES_PER_CHUNK;

    while (start < SIZE) {
      let chunk = files[i].slice(start, end);
      start = end;
      end = start + BYTES_PER_CHUNK;
      request(chunk);
    }
  }
}

<div class='button' onClick='cancel()'>Отмена</div>

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

const request = new XMLHttpRequest();
const url = "https://example.com/postDataToDB.php";
const xhrPool = []

function request(chunk) {
  const formData = new FormData();
  formData.append("newFile", chunk);
  request.open("POST", url, true); //работает в асинхроне
  request.send(formData);

  xhrPool.push(request);
}

function cancel() { //отмена
  xhrPool.forEach(function(request) {
    request.abort();
  })
}

Посоветуйте, может какую статейку почитать?

БЛОГ НА HUSL

Прервать множество xhr-запросов на сервер

Ответы (0 шт):