从如何停掉 Promise 链说起

在使用Promise处理一些复杂逻辑的过程中，我们有时候会想要在发生某种错误后就停止执行Promise链后面所有的代码。

然而Promise本身并没有提供这样的功能，一个操作，要么成功，要么失败，要么跳转到then里，要么跳转到catch里。

如果非要处理这种逻辑，一般的想法是抛出一个特殊的Error对象，然后在Promise链后面的所有catch回调里，检查传来的错误是否为该类型的错误，如果是，就一直往后抛，类似下面这样

doSth()
.then(value => {
  if (sthErrorOccured()) {
    throw new Error('BIG_ERROR')
  }
  // normal logic
})
.catch(reason => {
  if (reason.message === 'BIG_ERROR') {
    throw reason
  }
  // normal logic
})
.then()
.catch(reason => {
  if (reason.message === 'BIG_ERROR') {
    throw reason
  }
  // normal logic
})
.then()
.catch(reason => {
  if (reason.message === 'BIG_ERROR') {
    throw reason
  }
  // normal logic
})

这种方案的问题在于，你需要在每一个catch里多写一个if来判断这个特殊的Error，繁琐不说，还增加了耦合度以及重构的困难。

如果有什么办法能直接在发生这种错误后停止后面所有Promise链的执行，我们就不需要在每个catch里检测这种错误了，只需要编写处理该catch块本应处理的错误的代码就可以了。

有没有办法不在每个catch里做这种判断呢？

办法确实是有的，那就是在发生无法继续的错误后，直接返回一个始终不resolve也不reject的Promise，即这个Promise永远处于pending状态，那么后面的Promise链当然也就一直不会执行了，因为会一直等着。类似下面这样的代码

Promise.stop = function() {
  return new Promise(function(){})
}

doSth()
.then(value => {
  if (sthBigErrorOccured()) {
    return Promise.stop()
  }
  // normal logic
})
.catch(reason => {// will never get called
  // normal logic
})
.then()
.catch(reason => {// will never get called
  // normal logic
})
.then()
.catch(reason => {// will never get called
  // normal logic
})

这种方案的好处在于你几乎不需要更改任何现有代码，而且兼容性也非常好，不管你使用的哪个Promise库，甚至是不同的Promise之间相互调用，都可以达到目的。

然而这个方案有一个不那么明显的缺陷，那就是会造成潜在的内存泄露。

试想，当你把回调函数传给Promise的then方法后，如果这时Promise的状态还没有确定下来，那么Promise实例肯定会在内部保留这些回调函数的引用；在一个robust的实现中，回调函数在执行完成后，Promise实例应该会释放掉这些回调函数的引用。如果使用上述方案，那么返回一个永远处于pending状态的Promise之后的Promise链上的所有Promise都将处于pending状态，这意味着后面所有的回调函数的内存将一直得不到释放。在简单的页面里使用这种方案也许还行得通，但在WebApp或者Node里，这种方案明显是不可接受的。

Promise.stop = function() {
  return new Promise(function(){})
}

doSth()
.then(value => {
  if (sthBigErrorOccured()) {
    return Promise.stop()
  }
  // normal logic
})
.catch(reason => {// this function will never got GCed
  // normal logic
})
.then()
.catch(reason => {// this function will never got GCed
  // normal logic
})
.then()
.catch(reason => {// this function will never got GCed
  // normal logic
})

那有没有办法即达到停止后面的链，同时又避免内存泄露呢。

让我们回到一开始的思路，我们在Promise链上所有的catch里都加上一句if，来判断传来的错误是否为一个无法处理的错误，如果是则一直往后面抛，这样就达到了即没有运行后面的逻辑，又避免了内存泄露的问题。

这是一个高度一致的逻辑，我们当然可以把它抽离出来。我们可以实现一个叫next的函数，挂在Promise.prototype上面，然后在里面判断是否是我们能处理的错误，如果是，则执行回调，如果不是，则一直往下传：

var BIG_ERROR = new Error('BIG_ERROR')

Promise.prototype.next = function(onResolved, onRejected) {
  return this.then(function(value) {
    if (value === BIG_ERROR) {
      return BIG_ERROR
    } else {
      return onResolved(value)
    }
  }, onRejected)
}

doSth()
.next(function(value) {
  if (sthBigErrorOccured()) {
    return BIG_ERROR
  }
  // normal logic
})
.next(value => {
  // will never get called
})

进一步，如果把上面代码中“致命错误”的语义换成“跳过后面所有的Promise”，我们就可以得到跳过后续Promise的方式了：

var STOP_SUBSEQUENT_PROMISE_CHAIN = new Error()

Promise.prototype.next = function(onResolved, onRejected) {
  return this.then(function(value) {
    if (value === STOP_SUBSEQUENT_PROMISE_CHAIN) {
      return STOP_SUBSEQUENT_PROMISE_CHAIN
    } else {
      return onResolved(value)
    }
  }, onRejected)
}

doSth()
.next(function(value) {
  if (sthBigErrorOccured()) {
    return STOP_SUBSEQUENT_PROMISE_CHAIN
  }
  // normal logic
})
.next(value => {
  // will never get called
})

为了更明显的语义，我们可以把“跳过后面所有的Promise”单独封装成一个Promise：

var STOP = {}
Promise.stop = function(){
  return Promise.resolve(STOP)
}

Promise.prototype.next = function(onResolved, onRejected) {
  return this.then(function(value) {
    if (value === STOP) {
      return STOP
    } else {
      return onResolved(value)
    }
  }, onRejected)
}

doSth()
.next(function(value) {
  if (sthBigErrorOccured()) {
    return Promise.stop()
  }
  // normal logic
})
.next(value => {
  // will never get called
})

这样就实现了在语义明确的情况下，不造成内存泄露，而且还停止了后面的Promise链。

为了对现有代码尽量少做改动，我们甚至可以不用新增next方法而是直接重写then：

(function() {
  var STOP_VALUE = Symbol()//构造一个Symbol以表达特殊的语义
  var STOPPER_PROMISE = Promise.resolve(STOP_VALUE)

  Promise.prototype._then = Promise.prototype.then

  Promise.stop = function() {
    return STOPPER_PROMISE//不是每次返回一个新的Promise，可以节省内存
  }

  Promise.prototype.then = function(onResolved, onRejected) {
    return this._then(function(value) {
      return value === STOP_VALUE ? STOP_VALUE : onResolved(value)
    }, onRejected)
  }
}())

Promise.resolve(8).then(v => {
  console.log(v)
  return 9
}).then(v => {
  console.log(v)
  return Promise.stop()//较为明确的语义
}).catch(function(){// will never called but will be GCed
  console.log('catch')
}).then(function(){// will never called but will be GCed
  console.log('then')
})

以上对then的重写并不会造成什么问题，闭包里的对象在外界是访问不到，外界也永远也无法构造出一个跟闭包里Symbol一样的对象，考虑到我们只需要构造一个外界无法“===”的对象，我们完全可以用一个Object来代替：

(function() {
  var STOP_VALUE = {}//只要外界无法“===”这个对象就可以了
  var STOPPER_PROMISE = Promise.resolve(STOP_VALUE)

  Promise.prototype._then = Promise.prototype.then

  Promise.stop = function() {
    return STOPPER_PROMISE//不是每次返回一个新的Promise，可以节省内存
  }

  Promise.prototype.then = function(onResolved, onRejected) {
    return this._then(function(value) {
      return value === STOP_VALUE ? STOP_VALUE : onResolved(value)
    }, onRejected)
  }
}())

Promise.resolve(8).then(v => {
  console.log(v)
  return 9
}).then(v => {
  console.log(v)
  return Promise.stop()//较为明确的语义
}).catch(function(){// will never called but will be GCed
  console.log('catch')
}).then(function(){// will never called but will be GCed
  console.log('then')
})

这个方案的另一个好处（好处之一是不会造成内存泄露）是可以让你非常平滑地（甚至是一次性的）从“返回一个永远pending的Promise”过度到这个方案，因为代码及其语义都基本没有变化。在之前，你可以定义一个Promise.stop()方法来返回一个永远pending的Promise；在之后，Promise.stop()返回一个外界无法得到的值，用以表达“跳过后面所有的Promise”，然后在我们重写的then方法里使用。

这样就解决了停止Promise链这样一个让人纠结的问题。

在考察了不同的Promise实现后，我发现Bluebird和浏览器原生Promise都可以在Promise.prototype上直接增加实例方法，但Q和$q(Angular)却不能这么做，具体要在哪个子对象的原型上加或者改方法我就没有深入研究了，但相信肯定是有办法的。

可是这篇文章如果到这里就结束的话，就显得太没有意思了~~

顺着上面的思路，我们甚至可以实现Promise链的多分支跳转。

我们知道，Promise链一般来说只支持双分支跳转。

按照Promise链的最佳写法实践，处理成功的回调只用then的第一个参数注册，错误处理的回调只使用catch来注册。这样在任意一个回调里，我们可以通过return或者throw（或者所返回Promise的最终状态的成功与否）跳转到最近的then或者catch回调里：

doSth()
.then(fn1)
.catch(fn2)
.catch(fn3)
.then(fn4)
.then(fn5)
.catch(fn6)

以上代码中，任意一个fn都只能选择往后跳到最近一then或者catch的回调里。

但在实际的使用的过程中，我发现双分支跳转有时满足不了我的需求。如果能在不破坏Promise标准的前提下让Promise实现多分支跳转，将会对复杂业务代码的可读性以及可维护性有相当程度的提升。

顺着上面的思路，我们可以在Promise上定义多个有语义的函数，在Promise.prototype上定义对应语义的实例方法，然后在实例方法中判断传来的值，然后根据条件来执行或者不执行该回调，当这么说肯定不太容易明白，我们来看代码分析：

(function() {
  var STOP = {}
  var STOP_PROMISE = Promise.resolve(STOP)
  var DONE = {}
  var WARN = {}
  var ERROR = {}
  var EXCEPTION = {}
  var PROMISE_PATCH = {}

  Promise.prototype._then = Promise.prototype.then//保存原本的then方法

  Promise.prototype.then = function(onResolved, onRejected) {
    return this._then(result => {
      if (result === STOP) {// 停掉后面的Promise链回调
        return result
      } else {
        return onResolved(result)
      }
    }, onRejected)
  }

  Promise.stop = function() {
    return STOP_PROMISE
  }

  Promise.done = function(value) {
    return Promise.resolve({
      flag: DONE,
      value,
    })
  }

  Promise.warn = function(value) {
    return Promise.resolve({
      flag: WARN,
      value,
    })
  }

  Promise.error = function(value) {
    return Promise.resolve({
      flag: ERROR,
      value,
    })
  }

  Promise.exception = function(value) {
    return Promise.resolve({
      flag: EXCEPTION,
      value,
    })
  }

  Promise.prototype.done = function(cb) {
    return this.then(result => {
      if (result && result.flag === DONE) {
        return cb(result.value)
      } else {
        return result
      }
    })
  }

  Promise.prototype.warn = function(cb) {
    return this.then(result => {
      if (result && result.flag === WARN) {
        return cb(result.value)
      } else {
        return result
      }
    })
  }

  Promise.prototype.error = function(cb) {
    return this.then(result => {
      if (result && result.flag === ERROR) {
        return cb(result.value)
      } else {
        return result
      }
    })
  }

  Promise.prototype.exception = function(cb) {
    return this.then(result => {
      if (result && result.flag === EXCEPTION) {
        return cb(result.value)
      } else {
        return result
      }
    })
  }
})()

然后我们可以像下面这样使用：

new Promise((resolve, reject) => {
    // resolve(Promise.stop())
    // resolve(Promise.done(1))
    // resolve(Promise.warn(2))
    // resolve(Promise.error(3))
    // resolve(Promise.exception(4))
  })
  .done(value => {
    console.log(value)
    return Promise.done(5)
  })
  .warn(value => {
    console.log('warn', value)
    return Promise.done(6)
  })
  .exception(value => {
    console.log(value)
    return Promise.warn(7)
  })
  .error(value => {
    console.log(value)
    return Promise.error(8)
  })
  .exception(value => {
    console.log(value)
    return
  })
  .done(value => {
    console.log(value)
    return Promise.warn(9)
  })
  .warn(value => {
    console.log(value)
  })
  .error(value => {
    console.log(value)
  })

以上代码中：

  • 如果运行第一行被注释的代码，这段程序将没有任何输出，因为所有后面的链都被“停”掉了
  • 如果运行第二行被注释的代码，将输出1 5 9
  • 如果运行第三行被注释的代码，将输出2 6 9
  • 如果运行第四行被注释的代码，将输出3 8
  • 如果运行第五行被注释的代码，将输出4 7

即return Promise.done(value)将跳到最近的done回调里

依次类推。

这样就实现了Promise链的多分支跳转。针对不同的业务，可以封装出不同语义的静态方法和实例方法，实现任意多的分支跳转。

但这个方案目前有一点不足，就是不能用then来捕获任意分支：

new Promise((resolve) => {
  resolve(Promise.warn(2))
})
.then(value => {

})
.warn(value => {

})

这种写法中，从语义或者经验上讲，then应该捕获前面的任意值，然而经过前面的改动，这里的then将捕获到这样的对象：

{
  flag: WARN,
  value: 2
}

而不是2，看看前面的代码就明白了：

Promise.prototype.then = function(onResolved, onRejected) {
  return this._then(result => {
    if (result === STOP) {
      return result
    } else {
      return onResolved(result)// 将会走这条分支，而此时result还是被包裹的对象
    }
  }, onRejected)
}

目前我还没有找到比较好的方案，试了几种都不太理想（也许代码写丑一点可以实现，但我并不想这么做）。所以只能在用到多分支跳转时不用then来捕获传来的值。

不过从有语义的回调跳转到then是可以正常工作的：

doSth()
.warn()
.done()
.exception()
.then()
.then()
.catch()

同样还是可以根据上面的代码看出来。

最后，此文使用到的一个anti pattern是对原生对象做了更改，这在一般的开发中是不被推荐的，本文只是提供一个思路。在真正的工程中，可以继承Promise类以达到几乎相同的效果，此处不再熬述。

多谢各位同僚的阅读，如有纰漏之处还请留言指正~

原文链接：https://github.com/xieranmaya/blog/issues/5

原文地址：https://www.cnblogs.com/wwhhq/p/8185834.html

时间： 2024-10-12 16:22:41

从如何停掉 Promise 链说起的相关文章

如何在Promise链中共享变量？

译者按: 使用Promise写过异步代码的话,会发现在Promise链中共享变量是一个非常头疼的问题,这也是Async/Await胜过Promise的一点,我们在Async/Await替代Promise的6个理由有提过,这篇博客将有更详细的介绍. 原文: Passing data between Promise callbacks 译者: Fundebug 为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改.另外,本文版权归原作者所有,翻译仅用于学习. 基于Promise编写异步代

systemctl无法停掉keepalived

这个问题搞了好半天,记录一下,启停都是用的systemctl 起初是测试vip漂移时候发现,主备节点都开启keepalived的状况下,一切正常,主节点的vip也可以访问. 第一次停掉主节点的keepalived程序时,vip顺利漂移到从节点 再次启动主节点keepalived,vip顺利漂移到主节点 *当再停掉主节点keepalived时,发现vip无法漂移到主节点,检查进程时,发现keepalived的进程依然还在 查找keepalived的pid文件,发现已经被干掉了 这时候想到应该是sy

Promise链式回调的使用

/*Promise通常配合then方法来链式的使用,then方法里面第一个回调函数表示成功状态,也就是resolve,第二个是失败状态-reject,如果默认写一个参数的话,默认resolve*/ let checkLogin=()=> { return new Promise((resolve,reject)=>{ let flag=document.cookie.indexOf("userId")!=-1?true:false; if(flag=true){ resol

virgo-tomcat没有任务错误日志的停掉的解决办法

最近virgo-tomcat总是无缘无故的down掉,用了下面的几种方法来解决这个问题,具体哪个方法生效了,目前还不清楚...1. 删掉了home/logs下面的很大的日志文件 2. 在.bash_profile文件里添加了JAVA_OPTS="-Xms4096m -Xmx4096m -XX:MaxPermSize=512m -XX:SurvivorRatio=4 -XX:ParallelGCThreads=4 -server -verbose:gc" 3. 在jenkins的节点配置

windows中快速停掉占用某端口的进程的方法

在Windows操作系统中,我们在启动一个tomcat服务器时,经常会发现8080端口已经被占用的错误,而我们又不知道如何停止这个tomcat服务器. 本文将通过命令来强行终止这个已经运行的tomcat进程如下: 1.首先查找到占用8080端口的进程号PID是多少 CMD>netstat -ano | findstr 8080 这个命令输出的最后一列表示占用8080端口的进程号是多少,假设为1234 2.kill掉这个进程 CMD>taskkill /F /PID 1234 这样8080端口就

promise链式

var getJSON = function(url) { var promise = new RSVP.Promise(function(resolve, reject){ var client = new XMLHttpRequest(); client.open("GET", url); client.onreadystatechange = handler; client.responseType = "json"; client.setRequestHea

promise链式调用

//不了解promise可以先去看看,了解后再来相信大家读能看的懂function Promise1(resolve, reject) { setTimeout(function() { resolve('1'); },5000);} function Promise2(resolve, reject) { setTimeout(function() { resolve('2'); },5000);} function Promise3(resolve) { setTimeout(functio

MongoDB 批量插入避免唯一值重复停掉问题

使用唯一索引+insert_many+ordered=false insert_many方法本质上也是bulk操作,但它较update少了搜索的部分,因此理论上更快.同时也是因为没有进行搜索就插入,它没有办法判断插入的数据是否存在,这点就需要通过item_id上的唯一索引来确保.同时默认情况下insert_many使用ordered=true,遇到一个插入错误(item_id重复)就停止了,所以需要ordered=false. 原文地址:https://www.cnblogs.com/xibuh

【转】这些面试题你会怎么答?

前言 最近参加了几场面试,积累了一些高频面试题,我把面试题分为两类,一种是基础试题: 主要考察前端技基础是否扎实,是否能够将前端知识体系串联.一种是开放式问题: 考察业务积累,是否有自己的思考,思考问题的方式,这类问题没有标准答案. 基础题 题目的答案提供了一个思考的方向,答案不一定正确全面,有错误的地方欢迎大家请在评论中指出,共同进步. 怎么去设计一个组件封装 组件封装的目的是为了重用,提高开发效率和代码质量 低耦合,单一职责,可复用性,可维护性 前端组件化设计思路 js 异步加载的方式 渲染