取消一个普通的 ECMAScript 6 Promise 链

IT技术 javascript promise cancellation es6-promise
2021-01-26 02:10:43

是否有清除.thenJavaScriptPromise实例s 的方法

我已经在QUnit之上编写了一个 JavaScript 测试框架该框架通过在Promise. (抱歉这个代码块的长度。我尽可能地评论它,所以感觉不那么乏味。)

/* Promise extension -- used for easily making an async step with a
       timeout without the Promise knowing anything about the function 
       it's waiting on */
$$.extend(Promise, {
    asyncTimeout: function (timeToLive, errorMessage) {
        var error = new Error(errorMessage || "Operation timed out.");
        var res, // resolve()
            rej, // reject()
            t,   // timeout instance
            rst, // reset timeout function
            p,   // the promise instance
            at;  // the returned asyncTimeout instance

        function createTimeout(reject, tempTtl) {
            return setTimeout(function () {
                // triggers a timeout event on the asyncTimeout object so that,
                // if we want, we can do stuff outside of a .catch() block
                // (may not be needed?)
                $$(at).trigger("timeout");

                reject(error);
            }, tempTtl || timeToLive);
        }

        p = new Promise(function (resolve, reject) {
            if (timeToLive != -1) {
                t = createTimeout(reject);

                // reset function -- allows a one-time timeout different
                //    from the one original specified
                rst = function (tempTtl) {
                    clearTimeout(t);
                    t = createTimeout(reject, tempTtl);
                }
            } else {
                // timeToLive = -1 -- allow this promise to run indefinitely
                // used while debugging
                t = 0;
                rst = function () { return; };
            }

            res = function () {
                clearTimeout(t);
                resolve();
            };

            rej = reject;
        });

        return at = {
            promise: p,
            resolve: res,
            reject: rej,
            reset: rst,
            timeout: t
        };
    }
});

/* framework module members... */

test: function (name, fn, options) {
    var mod = this; // local reference to framework module since promises
                    // run code under the window object

    var defaultOptions = {
        // default max running time is 5 seconds
        timeout: 5000
    }

    options = $$.extend({}, defaultOptions, options);

    // remove timeout when debugging is enabled
    options.timeout = mod.debugging ? -1 : options.timeout;

    // call to QUnit.test()
    test(name, function (assert) {
        // tell QUnit this is an async test so it doesn't run other tests
        // until done() is called
        var done = assert.async();
        return new Promise(function (resolve, reject) {
            console.log("Beginning: " + name);

            var at = Promise.asyncTimeout(options.timeout, "Test timed out.");
            $$(at).one("timeout", function () {
                // assert.fail() is just an extension I made that literally calls
                // assert.ok(false, msg);
                assert.fail("Test timed out");
            });

            // run test function
            var result = fn.call(mod, assert, at.reset);

            // if the test returns a Promise, resolve it before resolving the test promise
            if (result && result.constructor === Promise) {
                // catch unhandled errors thrown by the test so future tests will run
                result.catch(function (error) {
                    var msg = "Unhandled error occurred."
                    if (error) {
                        msg = error.message + "\n" + error.stack;
                    }

                    assert.fail(msg);
                }).then(function () {
                    // resolve the timeout Promise
                    at.resolve();
                    resolve();
                });
            } else {
                // if test does not return a Promise, simply clear the timeout
                // and resolve our test Promise
                at.resolve();
                resolve();
            }
        }).then(function () {
            // tell QUnit that the test is over so that it can clean up and start the next test
            done();
            console.log("Ending: " + name);
        });
    });
}

如果测试超时,我的超时 Promise 将assert.fail()在测试中,以便将测试标记为失败,这一切都很好,但是测试继续运行,因为测试 Promise ( result) 仍在等待解决它。

我需要一个好的方法来取消我的测试。我可以通过在框架modulethis.cancelTest或其他东西上创建一个字段来做到这一点,并在测试中经常检查(例如在每次then()迭代开始时)是否取消。但是,理想情况下,我可以$$(at).on("timeout", /* something here */)用来清除变量then()剩余的s result,这样其余的测试都不会运行。

这样的东西存在吗?

快速更新

我尝试使用Promise.race([result, at.promise]). 它没有用。

更新 2 + 混乱

为了解除对我的阻止,我mod.cancelTest在测试想法中添加了几行带有/polling 的(我还删除了事件触发器。)

return new Promise(function (resolve, reject) {
    console.log("Beginning: " + name);

    var at = Promise.asyncTimeout(options.timeout, "Test timed out.");
    at.promise.catch(function () {
        // end the test if it times out
        mod.cancelTest = true;
        assert.fail("Test timed out");
        resolve();
    });

    // ...
    
}).then(function () {
    // tell QUnit that the test is over so that it can clean up and start the next test
    done();
    console.log("Ending: " + name);
});

我在catch语句中设置了一个断点,它被命中了。现在让我感到困惑的是,then()没有调用语句。想法?

更新 3

想通了最后一件事。 fn.call()抛出了一个我没有发现的错误,所以测试Promise在at.promise.catch()可以解决它之前被拒绝了。

6个回答

是否有清除.thenJavaScript Promise 实例s 的方法

不。至少在 ECMAScript 6 中没有。then默认情况下(不幸的是)Promise(及其处理程序)是不可取消的在 es-discuss(例如这里)上有一些关于如何以正确的方式做到这一点的讨论,但无论哪种方法会获胜,它都不会出现在 ES6 中。

当前的观点是,子类化将允许使用您自己的实现创建可取消的Promise(不确定它的效果如何)

在语言委员会找到最好的方法之前(希望是 ES7?),您仍然可以使用用户空间 Promise 实现,其中许多功能取消。

当前的讨论在https://github.com/domenic/cancelable-promisehttps://github.com/bergus/promise-cancellation草案中。

@LUH3417:“正常”功能在这方面很无聊。您启动一个程序并等到它完成 - 或者您kill忽略副作用已经离开您的环境的可能奇怪的状态(因此您通常也将其丢弃,例如任何半完成的输出)。然而,非阻塞或异步函数是为在交互式应用程序中工作而构建的,您希望在其中对正在进行的操作的执行进行更精细的控制。
2021-03-12 02:10:43
“一些讨论” - 我可以链接到 esdiscuss 或 GitHub 上的大约 30 个线程:)(更不用说你自己在 bluebird 3.0 中的取消帮助)
2021-03-14 02:10:43
Domenic删除了 TC39 提案...... cc @BenjaminGruenbaum
2021-03-14 02:10:43
@BenjaminGruenbaum:你准备好在某处分享这些链接了吗?我一直想总结意见和尝试,并发布一个讨论的建议,所以如果我能回来检查我什么都没有忘记,我会很高兴。
2021-04-02 02:10:43
我在工作时手头有它们 - 所以我会在 3-4 天内拿到它们。您可以在 promises-aplus 下查看 promise 取消规范以获得良好的开端。
2021-04-06 02:10:43

虽然在 ES6 中没有标准的方法来做到这一点,但有一个名为Bluebird的库来处理这个问题。

react文档中还描述了一种推荐的方法。它看起来与您在第 2 次和第 3 次更新中的内容相似。

const makeCancelable = (promise) => {
  let hasCanceled_ = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then((val) =>
      hasCanceled_ ? reject({isCanceled: true}) : resolve(val)
    );
    promise.catch((error) =>
      hasCanceled_ ? reject({isCanceled: true}) : reject(error)
    );
  });

  return {
    promise: wrappedPromise,
    cancel() {
      hasCanceled_ = true;
    },
  };
};

const cancelablePromise = makeCancelable(
  new Promise(r => component.setState({...}}))
);

cancelablePromise
  .promise
  .then(() => console.log('resolved'))
  .catch((reason) => console.log('isCanceled', reason.isCanceled));

cancelablePromise.cancel(); // Cancel the promise

摘自:https : //facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

这部分是正确的,但如果你有很长的Promise链,这种方法就行不通了。
2021-03-15 02:10:43
这个取消的定义只是拒绝Promise。这取决于“取消”的定义。
2021-03-19 02:10:43
如果你想取消一组Promise会发生什么?
2021-04-01 02:10:43
这种方法的问题是如果你有一个永远不会解决或拒绝的Promise,它永远不会被取消。
2021-04-11 02:10:43

我真的很惊讶没有人提到Promise.race这个候选人:

const actualPromise = new Promise((resolve, reject) => { setTimeout(resolve, 10000) });
let cancel;
const cancelPromise = new Promise((resolve, reject) => {
    cancel = reject.bind(null, { canceled: true })
})

const cancelablePromise = Object.assign(Promise.race([actualPromise, cancelPromise]), { cancel });
是的,它的工作原理实际上有点微妙,但它确实有效。Promise构造函数的运行同步,从而已经运行,且无法取消。它调用setTimeout安排一个将解决Promise的事件但该事件不是Promise链的一部分调用cancel会导致可取消的Promise被拒绝,因此在解决时链接到运行的任何内容都将被丢弃而不会运行。setTimeout事件处理程序仍然运行,最终却不能解析已经拒绝Promise; 如果要取消超时本身,则需要不同的机制。
2021-03-23 02:10:43
我不相信这行得通。如果您将Promise更改为 log,则运行cancel()仍将导致 log 被调用。``` const actualPromise = new Promise((resolve, reject) => { setTimeout(() => { console.log('actual called'); resolve() }, 10000) }); ``
2021-03-28 02:10:43
问题是如何取消Promise(=> 停止then要执行的链式s),而不是如何取消setTimeout(=> clearTimeout) 或同步代码,除非您在每行 ( if (canceled) return)后放置一个 if 否则无法实现。(不要这样做)
2021-04-11 02:10:43
const makeCancelable = promise => {
    let rejectFn;

    const wrappedPromise = new Promise((resolve, reject) => {
        rejectFn = reject;

        Promise.resolve(promise)
            .then(resolve)
            .catch(reject);
    });

    wrappedPromise.cancel = () => {
        rejectFn({ canceled: true });
    };

    return wrappedPromise;
};

用法:

const cancelablePromise = makeCancelable(myPromise);
// ...
cancelablePromise.cancel();

可以在 的帮助下取消 Promise AbortController

那么是否有清除方法: 是的,您可以拒绝带有AbortController对象的Promise,然后promise将绕过所有 then 块并直接转到 catch 块。

例子:

import "abortcontroller-polyfill";

let controller = new window.AbortController();
let signal = controller.signal;
let elem = document.querySelector("#status")

let example = (signal) => {
    return new Promise((resolve, reject) => {
        let timeout = setTimeout(() => {
            elem.textContent = "Promise resolved";
            resolve("resolved")
        }, 2000);

        signal.addEventListener('abort', () => {
            elem.textContent = "Promise rejected";
            clearInterval(timeout);
            reject("Promise aborted")
        });
    });
}

function cancelPromise() {
    controller.abort()
    console.log(controller);
}

example(signal)
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.log("Catch: ", error)
    });

document.getElementById('abort-btn').addEventListener('click', cancelPromise);

html


    <button type="button" id="abort-btn" onclick="abort()">Abort</button>
    <div id="status"> </div>

注意:需要添加 polyfill,并非所有浏览器都支持。

现场示例

编辑优雅湖 5jnh3