你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
vilicvane

中断或取消 Promise 链 7个回复 专栏 @ 框架与库

vilicvane 发布于 3 年前

Promise

Promise 已经成为了 JavaScript 管理异步操作的重要工具之一. 然而, 有的时候还是会很头痛:

Promise
    // 等价于 `Promise.resolve(undefined).then`.
    .then(() => {
        // 开始.
    })
    .then(() => {
        if (wantToBreakHere) {
            // 怎样在这里终止这个 Promise 链?
        }
    })
    .then(() => {
        // 一定条件下不想被执行的代码.
    });

当然我们可以嵌套后面的 then, 但如果整条链很长很厚, 也必然很痛苦.

不过很多 Promise 实现都有一个 catch 方法, 我们可以做一点点小动作:

/** 用于中断的信号 */
class BreakSignal { }

Promise
    .then(() => {
        // 开始.
    })
    .then(() => {
        if (wantToBreakHere) {
            // 抛出中断信号.
            throw new BreakSignal();
        }
    })
    .then(() => {
        // 需要跳过的部分.
    })
    // 接住中断信号.
    .catch(BreakSignal, () => { });

其实个人觉得这么干还是比较优雅的, 但如果中间还有其他的 onrejected handler, 则需要手动传递 BreakSignal (再次抛出).

现在考虑另一种不同于 break 的情形:

page.on('load', () => {
    Promise
        .then(() => asyncMethodA())
        .then(result => asyncMethodB(result))
        .then(result => {
            // 更新一些东西...
        });
});

如果 load 事件在短时间内触发了两次, 我们则需要取消前一个 Promise 链, 或者至少要防止它执行完成后做一些不该做的事情 (比如更新数据或者 UI).

那我们可以考虑这么处理:

class BreakSignal { }

let context;

/** 创建包含上下文信息的 wrapper */
function createWrapper() {
    let currentContext = context;

    return function (handler) {
        return function () {
            if (context !== currentContext) {
                throw new BreakSignal();
            }

            return handler.apply(undefined, arguments);
        };
    };
}

page.on('unload', () => {
    context = undefined;
});

page.on('load', () => {
    context = {};
    let wrap = createWrapper();

    Promise
        // 包起来~
        .then(wrap(asyncMethodA))
        .then(wrap(asyncMethodB))
        .then(result => {
            // 更新一些东西...
        })
        .catch(BreakSignal, () => { });
});

[AD] ThenFail

因为平时用的是自己的 Promise 实现 - ThenFail - 所以自己有需求一定要满足自己. 我愉快地添加了伪 break 语句.

import { Promise } from 'thenfail';

Promise
    .then(() => {
        // 开始.
    })
    .then(() => {
        if (wantToBreakHere) {
            // 就是这么任性.
            Promise.break;
        }

        return Promise
            .then(() => {
                Promise.break;
            })
            .then(() => {
                // 这里永远也不会执行.
            });
            // 嵌套的情况不需要最下面的 `enclose()`.
    })
    .then(() => {
        // 需要跳过的部分.
    })
    // 结束当前的 Promise 链的上下文 (context), 避免 `break` 掉太多.
    // 如果这个 Promise 链会被返回, 交给不在你控制范围内的代码, 那么 enclose 操作非常重要~
    .enclose();

其实还能 break ThenFail 的 each helper:

Promise
    .each([1, 2, 3], value => {
        if (value > 1) {
            Promise.break;

            // 或者异步地 `break`:
            return Promise
                .then(() => {
                    // 做一些事情.
                })
                .break;
        }
    })
    .then(completed => {
        if (completed) {
            // 一些代码...
        }
    });

当然有的同学可能看出来了, Promise.break 这个伪语句实际上是一个会抛出异常的 getter, 抛出的异常则是类似于 BreakSignal 的这么个东西 (虽然实现上一个是 object1 === object2, 一个是 object instanceof Class).

前面有提到 ThenFail 中上下文的概念, 如果需要取消相同上下文的整个 Promise 链, 只需要释放对应的 context 即可.

let context;

page.on('unload', () => {
    context.dispose();
});

page.on('load', () => {
    let promise = Promise
        .then(() => asyncMethodA())
        .then(result => asyncMethodB(result))
        .then(result => {
            // 更新一些东西...
        });

    context = promise.context;
});

另外, 释放上下文也会释放嵌套的上下文.

最后, ThenFail 是 Promises/A+ 标准的 TypeScript 实现, 极力推荐没有尝试过 TypeScript 的同学 (尤其是写 Node.js 和 Web App 的同学) 试试, 能把 Playground 做成 "IDE" 的也仅此一家了 (试试鼠标右键). ;)

  • maolion

    沙发

    #1
  • mfe_2015

    施主,你听说过vscode么。。。

    #2
  • maolion

    @mfe_2015 楼主是 软狗,所以对于 vsocde 从0.1开始 他就带领项目团队开始入坑, vscode 的熟悉成度 在国内 没多少人能比他了解, 他写过 vscode的插件。

    #3
  • hefangshi

    支持软狗,投靠async/await吧;)

    #4
  • vilicvane

    @hefangshi 哈哈, 因为我用 TypeScript 嘛, 目前有个尴尬的东西是 async/await 只能编译到 ES6, 然后 ES6 的一些特性 Node.js 还不支持, 要好好用的话必须再经过 Babel. 不过应该很快就能跟上了.

    #5
  • hefangshi

    @vilicvane 的确,所以我们现在的用法是不使用es6的一些特性。。。主要还是用async/await。。我觉得async/await比其他Node.js目前还不支持的es6特性更有意义。

    #6
  • vilicvane

    @hefangshi 嗯, 不过现在 Node.js 6.0 可以放心用啦~

    #7
登录后回复,如无账号,请使用邀请码注册