1

Описание

Сделал такое "дополнение"...

Promise.withSignal = function (callback) {
    const abortController = new AbortController();
    const promise = new Promise((resolve, reject) => callback(abortController.signal, resolve, reject));
    promise.catch(Function).finally(() => abortController.abort());
    return promise;
};

... чтобы облегчить себе жизнь при использовании Promise в слушателях.
Теперь пишу тест для него:

Promise.withSignal = function (callback) {
    const abortController = new AbortController();
    const promise = new Promise((resolve, reject) => callback(abortController.signal, resolve, reject));
    promise.catch(Function).finally(() => abortController.abort());
    return promise;
};

// Promise.withSignal should create a controllable promise
void async function () {
    const body = document.body;
    let counter = 0;
    const promise = Promise.withSignal((signal, resolve) => {
        body.addEventListener(`click`, (event) => resolve(++counter), { signal });
    });
    body.click();
    if (counter !== 1) console.warn(`Expected 1 for first time`);
    await promise;
    body.click();
    if (counter !== 1) console.warn(`Expected 1 for subsequent times`);
}();

Тест показывает, что функция нифига не работает.

Вопрос

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


Дополнительно 1

Вот минимальный пример использования:

Promise.withSignal = function(callback) {
  const abortController = new AbortController();
  const promise = new Promise((resolve, reject) => callback(abortController.signal, resolve, reject));
  promise.catch(Function).finally(() => abortController.abort());
  return promise;
};

void async function () {
  const buttonTrue = document.querySelector(`button#true`);
  const buttonFalse = document.querySelector(`button#false`);

  const choice = await Promise.withSignal((signal, resolve) => {
    buttonTrue.addEventListener(`click`, (event) => resolve(true), { signal });
    buttonFalse.addEventListener(`click`, (event) => resolve(false), { signal });
  });
  console.log(`Your choice is ${choice ? `'true'` : `'false'`}. You can't change it anymore`);
}();
<button id="true">True</button>
<button id="false">False</button>

14
  • Не совсем понял, что ты в итоге собрался сделать? Т.е. какая у тебя цель в применении AbortController в Promise?
    – ksa
    Commented 8 июл. в 7:00
  • @ksa к примеру, при использовании в группе слушателей, где из группы должен выполняться только 1 слушатель. Например, во всплывающих окнах. Хотя это не самый удачный пример.
    – eccs0103
    Commented 8 июл. в 10:13
  • Все равно я не особо понял чего ты добиваешься... Но если ты поставишь тестировочные сообщения - ты увидишь, что твой .finally(() => abortController.abort() выполняется самым последним, когда уже все свершилось и смысла в этом особого нет.
    – ksa
    Commented 8 июл. в 12:46
  • @ksa самым последним это когда? Не в конце функции?
    – eccs0103
    Commented 8 июл. в 13:36
  • Если поставить в твой пример вывод в консоль в ключевых точках - они все от рисуются и только потом появится сообщение в .finally(). Т.е. твой "аборт" будет уже после "рождения ребенка" и смысла в нем нет. Я могу в ответе такое показать... Но такое удалят, т.к. это не является ответом. :)
    – ksa
    Commented 8 июл. в 13:41

1 ответ 1

1

Я никак не пойму, в чем проблема

Как я и писал выше - твой "аборт" происходит уже после всех событий. Он в таком варианте бесполезен.

Вот посмотри. Я добавил в твой пример вывод в консоль для демонстрации.

Promise.withSignal = function (callback) {
  const abortController = new AbortController();
  const promise = new Promise((resolve, reject) => callback(abortController.signal, resolve, reject));
  promise
    .catch(Function)
    .finally(_ => {
      console.log('finally')
      abortController.abort()
    });
  return promise;
};

// Promise.withSignal should create a controllable promise
void async function () {
  const body = document.body;
  let counter = 0;
  const promise = Promise.withSignal((signal, resolve) => {
    body.addEventListener(`click`, (event) => {
      console.log('click', counter)
      resolve(++counter)
    }, { signal });
  });
  body.click();
  console.log(111, counter)
  if (counter !== 1) console.warn(`Expected 1 for first time`);
  console.log(222, counter)
  await promise;
  console.log(333, counter)
  body.click();
  console.log(444, counter)
  if (counter !== 1) console.warn(`Expected 1 for subsequent times`);
}();

Вот мой вариант... Такое ты хотел получить?

Делать "аборт" нужно в нужное время, извини за тавтологию... :)

Promise.withSignal = function (callback) {
  const abortController = new AbortController();
  const promise = new Promise((resolve, reject) => {
    callback(abortController, resolve, reject)
  });
  promise
    .catch(Function)
    .finally(_ => {
      console.log('finally')
      //abortController.abort()
    });
  return promise;
};

// Promise.withSignal should create a controllable promise
void async function () {
  const body = document.body;
  let counter = 0;
  const promise = Promise.withSignal((abortController, resolve) => {
    body.addEventListener(`click`, (event) => {
      console.log('click', counter)
      resolve(++counter)
      abortController.abort()
    }, { signal: abortController.signal });
  });
  body.click();
  console.log(111, counter)
  if (counter !== 1) console.warn(`Expected 1 for first time`);
  console.log(222, counter)
  await promise;
  console.log(333, counter)
  body.click();
  console.log(444, counter)
  if (counter !== 1) console.warn(`Expected 1 for subsequent times`);
}();

Вот еще вариант придумал... Думаю тебе понравится такой подход. ;)

Promise.withSignal = function (callback) {
    const abortController = new AbortController();
    const promise = new Promise((resolve, reject) => callback(abortController.signal, resolve, reject));
    promise.then(() => abortController.abort(), () => abortController.abort());
    return promise;
};

// Promise.withSignal should create a controllable promise
void async function () {
    const body = document.body;
    let counter = 0;
    const promise = Promise.withSignal((signal, resolve) => {
        body.addEventListener(`click`, (event) => resolve(++counter), { signal });
    });
    body.click();
    if (counter !== 1) console.warn(`Expected 1 for first time`);
    await promise;
    body.click();
    if (counter !== 1) console.warn(`Expected 1 for subsequent times`);
    console.log('Ok', counter)
}();

1
  • Да, второй вариант именно то, что нужно
    – eccs0103
    Commented 8 июл. в 20:29

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.