中斷或取消 Promise 鏈

Promise 已經(jīng)成為了 JavaScript 管理異步操作的重要工具之一. 然而, 有的時(shí)候還是會(huì)很頭痛:

Promise// 等價(jià)于 `Promise.resolve(undefined).then`..then(() => {// 開始.}).then(() => {if (wantToBreakHere) {// 怎樣在這里終止這個(gè) Promise 鏈?}}).then(() => {// 一定條件下不想被執(zhí)行的代碼.});

當(dāng)然我們可以嵌套后面的 then, 但如果整條鏈很長(zhǎng)很厚, 也必然很痛苦.

不過(guò)很多 Promise 實(shí)現(xiàn)都有一個(gè) catch 方法, 我們可以做一點(diǎn)點(diǎn)小動(dòng)作:

/** 用于中斷的信號(hào) */ class BreakSignal { }Promise.then(() => {// 開始.}).then(() => {if (wantToBreakHere) {// 拋出中斷信號(hào).throw new BreakSignal();}}).then(() => {// 需要跳過(guò)的部分.})// 接住中斷信號(hào)..catch(BreakSignal, () => { });

其實(shí)個(gè)人覺得這么干還是比較優(yōu)雅的, 但如果中間還有其他的 onrejected handler, 則需要手動(dòng)傳遞 BreakSignal (再次拋出).

現(xiàn)在考慮另一種不同于 break 的情形:

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

如果 load 事件在短時(shí)間內(nèi)觸發(fā)了兩次, 我們則需要取消前一個(gè) Promise 鏈, 或者至少要防止它執(zhí)行完成后做一些不該做的事情 (比如更新數(shù)據(jù)或者 UI).

那我們可以考慮這么處理:

class BreakSignal { }let context;/** 創(chuàng)建包含上下文信息的 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// 包起來(lái)~.then(wrap(asyncMethodA)).then(wrap(asyncMethodB)).then(result => {// 更新一些東西...}).catch(BreakSignal, () => { }); });

ThenFail

因?yàn)槠綍r(shí)用的是自己的 Promise 實(shí)現(xiàn) - ThenFail - 所以自己有需求一定要滿足自己. 我愉快地添加了偽 break 語(yǔ)句.

import { Promise } from 'thenfail';Promise.then(() => {// 開始.}).then(() => {if (wantToBreakHere) {// 就是這么任性.Promise.break;}return Promise.then(() => {Promise.break;}).then(() => {// 這里永遠(yuǎn)也不會(huì)執(zhí)行.});// 嵌套的情況不需要最下面的 `enclose()`.}).then(() => {// 需要跳過(guò)的部分.})// 結(jié)束當(dāng)前的 Promise 鏈的上下文 (context), 避免 `break` 掉太多.// 如果這個(gè) Promise 鏈會(huì)被返回, 交給不在你控制范圍內(nèi)的代碼, 那么 enclose 操作非常重要~.enclose();

其實(shí)還能 break ThenFail 的 each helper:

Promise.each([1, 2, 3], value => {if (value > 1) {Promise.break;// 或者異步地 `break`:return Promise.then(() => {// 做一些事情.}).break;}}).then(completed => {if (completed) {// 一些代碼...}});

當(dāng)然有的同學(xué)可能看出來(lái)了, Promise.break 這個(gè)偽語(yǔ)句實(shí)際上是一個(gè)會(huì)拋出異常的 getter, 拋出的異常則是類似于 BreakSignal 的這么個(gè)東西 (雖然實(shí)現(xiàn)上一個(gè)是 object1 === object2, 一個(gè)是 object instanceof Class).

前面有提到 ThenFail 中上下文的概念, 如果需要取消相同上下文的整個(gè) Promise 鏈, 只需要釋放對(duì)應(yīng)的 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; });

另外, 釋放上下文也會(huì)釋放嵌套的上下文.

總結(jié)

以上是生活随笔為你收集整理的中断promise的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。