主页 / 问题 / 1586436
Accepted
eccs0103
Asked:2024-07-07 22:42:21 +0800 CST2024-07-07 22:42:21 +0800 CST

同时使用 Promise 和 AbortController 时出现的问题

  • 772

描述

我做了这个“补充”...

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>

javascript

1 个回答

  1. Best Answer

    我不知道问题出在哪里

    正如我上面所写，你的“堕胎”发生在所有事件之后。在这种情况下它是没有用的。

    看这个。我已将控制台输出添加到您的示例中以用于演示目的。

    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

相关问题