如何使用 clearTimeout 功能实现承诺的 setTimeout？

Question

以下实现抛出错误（见下方评论），如何解决？

interface PromiseWithAbort extends Promise<unknown> {
  abort: () => void
}

export const pause = (
  ms?: number,
  cb?: (...args: unknown[]) => unknown,
  ...args: unknown[]
): PromiseWithAbort => {
  let timeout

  // Error: Property 'abort' is missing in type 'Promise<unknown>'
  // but required in type 'PromiseWithAbort'.
  const promise: PromiseWithAbort = new Promise((resolve, reject) => {
    timeout = setTimeout(async () => {
      try {
        resolve(await cb?.(...args))
      } catch (error) {
        reject(error)
      }
    }, ms)
  })

  promise.abort = () => clearTimeout(timeout)

  return promise
}

Answer 1

问题是您分配给promise 的promise 没有abort 属性，但是您分配给promise 的类型需要它。解决此问题的一种简单方法是在将其分配给promise 之前添加它。 （这也可以让您摆脱 promise 上的显式类型。）

还有其他一些事情，请参阅*** cmets：

interface PromiseWithAbort extends Promise<unknown> {
    abort: () => void
}

export const pause = (
    ms?: number,
    cb?: (...args: unknown[]) => unknown,
    ...args: unknown[]
): PromiseWithAbort => {
    let timeout: number; // *** Need the type in order to avoid implicit `any`
  
    // *** Add `abort` to the promise before assigning to `promise`
    const promise = Object.assign(
        new Promise((resolve, reject) => {
            timeout = setTimeout(async () => {
                try {
                    resolve(await cb?.(...args));
                } catch (error) {
                    reject(error);
                }
             }, ms); // *** `ms` needs a default value, you're optionally passing `undefined`
        }), {
            abort: () => clearTimeout(timeout)
        }
    );
  
    return promise;
}

On the playground

也就是说，在cb（如果有的话）返回的promise上使用await并将结果传递给resolve有点迂回；相反，您可以将承诺传递给resolve，这会将您创建的承诺解析为cb（如果有）返回的承诺：

export const pause = (
    ms?: number,
    cb?: (...args: unknown[]) => unknown,
    ...args: unknown[]
): PromiseWithAbort => {
    let timeout: number;
  
    // *** Add `abort` to the promise before assigning to `promise`
    const promise = Object.assign(
        new Promise((resolve, reject) => {
            timeout = setTimeout(() => { // *** No need for `async`
                try {
                    resolve(cb?.(...args)); // *** No need for `await`, just resolve the promise to `cb`'s promise
                } catch (error) {
                    reject(error);
                }
             }, ms);
        }), {
            abort: () => clearTimeout(timeout)
        }
    );
  
    return promise;
}

On the playground

---

就其价值而言，我不会将abort 添加到承诺中，尤其是因为当您在该承诺上使用.then 或.catch 或在async 函数中使用它时，您的承诺从他们那里得到不会有abort 方法。相反，您可以考虑接受AbortSignal。

我还会删除 cb 并将 pause 设为纯粹的暂停功能。 cb 不必要地复杂化；您可以使用.then 或await，然后在您的代码中直接调用cb。

这是一个例子：

class CancelledError extends Error {
    constructor(msg = "Operation was cancelled") {
        super(msg);
    }
}

interface PauseOptions {
    signal?: AbortSignal;
    silent?: boolean;
}
export const pause = (
    ms: number,
    {signal, silent = false}: PauseOptions = {}
): Promise<void> => {
    return new Promise((resolve, reject) => {
        // Function we'll use if the operation is cancelled
        const cancelled = () => {
            if (!silent) {
                reject(new CancelledError());
            }
        };
        // The actual timer
        const handle = setTimeout(() => {
            if (signal?.aborted) { // It would be rare for this to happen
                cancelled();
            } else {
                resolve();
            }
        }, ms);
        // Handle cancellation
        signal?.addEventListener("abort", () => {
            clearTimeout(handle);
            cancelled();
        });
    });
};

On the playground