Как прервать XMLHttpRequest запрос извне?

Question

[Кирилл]

есть простая функция для отправки файла на сервер с отслеживанием прогресса:

export function uploadWithProgress(
  url: string,
  token: string,
  formData: FormData,
  onProgress: (percentage: number) => void
) {
  return new Promise<string>((res, rej) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url);

    xhr.setRequestHeader('Authorization', `Bearer ${token}`);

    xhr.onload = () => {
      const resp = JSON.parse(xhr.responseText);
      res(resp);
    };
    xhr.onerror = (evt) => rej(evt);
    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable) {
        const percentage = (event.loaded / event.total) * 100;
        onProgress(Math.round(percentage));
      }
    };

    xhr.send(formData);
  });
}

Я ей пользуюсь в нескольких местах и хочу в тех же местах получить доступ к возможности этот запрос прервать через xhr.abort(), но не понимаю как это сделать, т.к. экземпляр из которого можно вызвать находится внутри функции.

Как по-нормальному перепроектировать эту функцию, чтобы оставить ее изолированной, но при этом иметь возможность прерывать запрос?

Answer 1

[Кирилл]

Остановился на варианте, где создаю инстанс XMLHttpRequest в том месте где собираюсь использовать функцию и передаю его параметром. Так у меня есть доступ к instance.abort() где угодно.

Answer 2

[Антон Антон]

let xhr
let result = new Promise((res, rej) => {
xhr = new XMLHttpRequest();
//...
xhr.onabort = (evt) => rej(evt);
}
result.xhr = xhr
return result

Answer 3

[от это да]

связываешь экземаляр с внешним адресом и всё
потом извне по этому адресу обращаешься