Cancel a vanilla ECMAScript 6 Promise chain

Question

Is there a method for clearing the  thens of a JavaScript Promise instance  I ve written a JavaScript test framework on top of QUnit   The framework runs tests synchronously by running each one in a Promise    Sorry for the length of this code block   I commented it as best I can  so it feels less tedious      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     quot Operation timed out  quot            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  quot timeout quot                     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  quot Beginning   quot    name                var at   Promise asyncTimeout options timeout   quot Test timed out  quot                   at  one  quot timeout quot   function                         assert fail   is just an extension I made that literally calls                    assert ok false  msg                   assert fail  quot Test timed out quot                                    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  amp  amp  result constructor     Promise                       catch unhandled errors thrown by the test so future tests will run                 result catch function  error                        var msg    quot Unhandled error occurred  quot                      if  error                            msg   error message    quot  n quot    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  quot Ending   quot    name                          If a test times out  my timeout Promise will assert fail   on the test so that the test is marked as failed  which is all well and good  but the test continues to run because the test Promise  result  is still waiting to resolve it  I need a good way to cancel my test   I can do it by creating a field on the framework module this cancelTest or something  and checking every so often  e g  at the beginning of each then   iteration  within the test whether to cancel out   However  ideally  I could use    at  on  quot timeout quot      something here     to clear the remaining then  s on my result variable  so that none of the rest of the test is run  Does something like this exist  Quick Update I tried using Promise race  result  at promise     It didn t work  Update 2   confusion To unblock me  I added a few lines with the mod cancelTest polling within the test idea    I also removed the event trigger   return new Promise function  resolve  reject        console log  quot Beginning   quot    name        var at   Promise asyncTimeout options timeout   quot Test timed out  quot        at promise catch function                 end the test if it times out         mod cancelTest   true          assert fail  quot Test timed out quot            resolve                                then function             tell QUnit that the test is over so that it can clean up and start the next test     done        console log  quot Ending   quot    name        I set a breakpoint in the catch statement  and it s being hit   What s confusing me now is that the then   statement isn t being called   Ideas  Update 3 Figured the last thing out   fn call   was throwing an error which I didn t catch  so the test promise was rejecting before at promise catch   could resolve it

User · Answer

Try promise-abortable  https   www npmjs com package promise-abortable    npm install promise-abortable   import AbortablePromise from  promise-abortable    const timeout   new AbortablePromise  resolve  reject  signal    gt      setTimeout reject  timeToLive  error     signal onabort   resolve       Promise resolve fn    then      gt      timeout abort

User · Answer

I am still working through this idea  but here is how I have implemented a cancellable Promise using setTimeout as an example   The idea is that a promise is resolved or rejected whenever you have decided it is  so it should be a matter of deciding when you want to cancel  satisfying the criterion  and then calling the reject   function yourself    First  I think there are two reasons to finish a promise early  to get it over and done with  which I have called resolve  and to cancel  which I have called reject   Of course  that   s just my feeling  Of course there is a Promise resolve   method  but it   s in the constructor itself  and returns a dummy resolved promise  This instance resolve   method actually resolves an instantiated promise object  Second  you can happily add anything you like to a newly created promise object before you return it  and so I have just added resolve   and reject   methods to make it self-contained  Third  the trick is to be able to access the executor resolve and reject functions later  so I have simply stored them in a simple object from within the closure    I think the solution is simple  and I can   t see any major problems with it    x000D   x000D  function wait delay    x000D    var promise  x000D    var timeOut  x000D    var executor     x000D    promise new Promise function resolve reject    x000D      console log  Started    x000D      executor  resolve reject        Store the resolve and reject methods x000D      timeOut setTimeout function    x000D        console log  Timed Out    x000D        resolve    x000D        delay   x000D        x000D        Implement your own resolve methods  x000D        then access the stored methods x000D        promise reject function     x000D          console log  Cancelled    x000D          clearTimeout timeOut   x000D          executor reject    x000D           x000D        promise resolve function     x000D          console log  Finished    x000D          clearTimeout timeOut   x000D          executor resolve    x000D           x000D    return promise  x000D    x000D   x000D  var promise  x000D  document querySelector  button start   onclick     gt   x000D    promise wait 5000   x000D    promise x000D     then     gt console log  I have finished    x000D     catch     gt console log  or not     x000D     x000D  document querySelector  button cancel   onclick     gt   promise reject      x000D  document querySelector  button finish   onclick     gt   promise resolve      x000D   lt button id  start  gt Start lt  button gt  x000D   lt button id  cancel  gt Cancel lt  button gt  x000D   lt button id  finish  gt Finish lt  button gt  x000D   x000D   x000D

User · Answer

If you want to stop all thens catchs from being executed you can do this by injecting a promise that will never resolve  It probably has memory leak reprocusions but it will fix the issue and shouldn t cause too much wasted memory in most applications   new Promise  resolve  reject    gt        console log  first chain link executed       resolve  daniel       then name   gt        console log  second chain link executed       if  name      daniel                I don t want to continue the chain  return a new promise            that never calls its resolve function         return new Promise  resolve  reject    gt                console log  unresolved promise executed                        then      gt  console log  last chain link executed        VM492 2 first chain link executed    VM492 5 second chain link executed    VM492 8 unresolved promise executed

User · Answer

Here s our implementation https   github com permettez-moi-de-construire cancellable-promise  Used like  const     cancellablePromise    CancelToken    CancelError     require   permettezmoideconstruire cancellable-promise    const cancelToken   new CancelToken    const initialPromise   SOMETHING ASYNC   const wrappedPromise   cancellablePromise initialPromise  cancelToken       Somewhere  cancel the promise    cancelToken cancel       Then catch it wrappedPromise  then  res    gt        Actual  usual fulfill     catch  err    gt      if err instanceOf CancelError          Handle cancel error          Handle actual  usual error      which     Doesn t touch Promise API Let us make further cancellation inside catch call Rely on cancellation being rejected instead of resolved unlike any other proposal or implementation   Pulls and comments welcome

User · Answer

const makeCancelable   promise   gt        let rejectFn       const wrappedPromise   new Promise  resolve  reject    gt            rejectFn   reject           Promise resolve promise               then resolve               catch reject                wrappedPromise cancel        gt            rejectFn   canceled  true                 return wrappedPromise       Usage   const cancelablePromise   makeCancelable myPromise          cancelablePromise cancel

User · Answer

If p is a variable that contains a Promise  then p then empty   should dismiss the promise when it eventually completes or if it is already complete  yes  I know this isn t the original question  but it is my question    empty  is function empty        I m just a beginner and probably wrong  but these other answers seem too complicated  Promises are supposed to be simple

User · Answer

It is actually impossible to stop the execution of the promise  but you can hijack the reject and call it from the promise itself   class CancelablePromise     constructor executor        let  reject   null      const cancelablePromise   new Promise  resolve  reject    gt           reject   reject        return executor resolve  reject               cancelablePromise cancel    reject       return cancelablePromise          Usage   const p   new CancelablePromise  resolve  reject    gt      setTimeout      gt        console log  resolved         resolve         2000       p catch console log    setTimeout      gt      p cancel new Error  Messed up         1000

User · Answer

While there isn t a standard way of doing this in ES6  there is a library called Bluebird to handle this   There is also a recommended way described as part of the react documentation  It looks similar to what you have in your 2 and 3rd updates   const makeCancelable    promise    gt      let hasCanceled    false     const wrappedPromise   new Promise  resolve  reject    gt        promise then  val    gt        hasCanceled    reject  isCanceled  true     resolve val             promise catch  error    gt        hasCanceled    reject  isCanceled  true     reject error                  return       promise  wrappedPromise      cancel           hasCanceled    true                  const cancelablePromise   makeCancelable    new Promise r   gt  component setState              cancelablePromise    promise    then      gt  console log  resolved       catch  reason    gt  console log  isCanceled   reason isCanceled     cancelablePromise cancel       Cancel the promise   Taken from  https   facebook github io react blog 2015 12 16 ismounted-antipattern html

User · Answer

Set a  cancelled  property on the Promise to signal then   and catch   to exit early   It s very effective  especially in Web Workers that have existing microtasks queued up in Promises from onmessage handlers    x000D   x000D     Queue task to resolve Promise after the end of this script x000D  const promise   new Promise resolve   gt  setTimeout resolve   x000D   x000D  promise then     gt    x000D    if  promise canceled    x000D      log  Promise cancelled   Exiting early       x000D      return  x000D      x000D   x000D    log  No cancelation signaled   Continue       x000D     x000D   x000D  promise canceled   true  x000D   x000D  function log msg    x000D    document body innerHTML   msg  x000D    x000D   x000D   x000D

User · Answer

Is there a method for clearing the  thens of a JavaScript Promise instance    No  Not in ECMAScript 6 at least  Promises  and their then handlers  are uncancellable by default  unfortunately   There is a bit of discussion on es-discuss  e g  here  about how to do this in the right way  but whatever approach will win it won t land in ES6   The current standpoint is that subclassing will allow to create cancellable promises using your own implementation  not sure how well that ll work    Until the language commitee has figured out the best way  ES7 hopefully   you can still use userland Promise implementations  many of which feature cancellation   Current discussion is in the https   github com domenic cancelable-promise and https   github com bergus promise-cancellation drafts

User · Answer

Using CPromise package we can use the following approach  Live demo  import CPromise from  quot c-promise2 quot    const chain   new CPromise  resolve  reject    onCancel      gt      const timer   setTimeout resolve  1000  123     onCancel      gt  clearTimeout timer          then  value    gt  value   1     then       value    gt  console log  Done    value          err  scope    gt          console warn err      CanceledError  canceled       console log  isCanceled    scope isCanceled        true             setTimeout      gt      chain cancel       100    The same thing using AbortController  Live demo  import CPromise from  quot c-promise2 quot    const controller  new CPromise AbortController     new CPromise  resolve  reject    onCancel      gt      const timer   setTimeout resolve  1000  123     onCancel      gt  clearTimeout timer          then  value    gt  value   1     then       value    gt  console log  Done    value          err  scope    gt          console warn err         console log  isCanceled    scope isCanceled               listen controller signal    setTimeout      gt      controller abort       100

User · Answer

I m really surprised that no-one mentions Promise race as a candidate for this   const actualPromise   new Promise  resolve  reject    gt    setTimeout resolve  10000      let cancel  const cancelPromise   new Promise  resolve  reject    gt        cancel   reject bind null    canceled  true        const cancelablePromise   Object assign Promise race  actualPromise  cancelPromise      cancel

User · Answer

simple version   just give out the reject function   function Sleep ms cancel holder      return new Promise function resolve reject     var done false     var t setTimeout function   if done return done true resolve      ms     cancel holder cancel function   if done return done true if t clearTimeout t  reject              a wraper solution  factory   the solution I found is to pass a cancel holder object  it will have a cancel function  if it has a cancel function then it is cancelable   This cancel function rejects the promise with Error  canceled     Before resolve  reject  or on cancel prevent the cancel function to be called without reason   I have found convenient to pass the cancel action by injection  function cancelablePromise cancel holder promise fn optional external cancel      if  cancel holder cancel holder       return new Promise  function resolve reject        var canceled false      var resolve2 function    if canceled  return  canceled true  delete cancel holder cancel  resolve apply this arguments        var reject2 function    if canceled  return  canceled true  delete cancel holder cancel  reject apply this arguments        var on cancel        cancel holder cancel function          if canceled  return  canceled true         delete cancel holder cancel        cancel holder canceled true         if on cancel cancel on cancel cancel          if optional external cancel optional external cancel           reject new Error  canceled                 return promise fn call this resolve2 reject2 on cancel                    function Sleep ms cancel holder      return cancelablePromise cancel holder function resolve reject oncacnel      var t setTimeout resolve  ms     oncacnel cancel function   if t clearTimeout t                  let cancel holder         meanwhile in another place it can be canceled setTimeout function     if cancel holder cancel cancel holder cancel      500    Sleep 1000 cancel holder  then function      console log  sleept well       function e     if e message    canceled   throw e   console log  sleep interrupted

User · Answer

Michael Yagudaev  s answer works for me   But the original answer did not chain the wrapped promise with  catch   to handle reject handling  here is my improvement on top of  Michael Yagudaev s answer   const makeCancelablePromise   promise   gt      let hasCanceled   false    const wrappedPromise   new Promise  resolve  reject    gt        promise        then val   gt   hasCanceled   reject   isCanceled  true      resolve val           catch          error   gt   hasCanceled   reject   isCanceled  true      reject error                     return       promise  wrappedPromise      cancel           hasCanceled   true                    Example Usage  const cancelablePromise   makeCancelable    new Promise  rs  rj    gt          do something           cancelablePromise promise then      gt  console log  resolved    catch err   gt      if  err isCanceled        console log  Wrapped promise canceled        return        console log  Promise was not canceled but rejected due to errors     err       cancelablePromise cancel

User · Answer

Promise can be cancelled with the help of AbortController      Is there a method for clearing then   yes you can reject the promise with AbortController object and then the promise will bypass all then blocks and go directly to the catch block     Example   import  abortcontroller-polyfill    let controller   new window AbortController    let signal   controller signal  let elem   document querySelector   status    let example    signal    gt        return new Promise  resolve  reject    gt            let timeout   setTimeout      gt                elem textContent    Promise resolved               resolve  resolved              2000            signal addEventListener  abort        gt                elem textContent    Promise rejected               clearInterval timeout               reject  Promise aborted                          function cancelPromise         controller abort       console log controller      example signal       then data   gt            console log data               catch error   gt            console log  Catch     error           document getElementById  abort-btn   addEventListener  click   cancelPromise      Html        lt button type  button  id  abort-btn  onclick  abort    gt Abort lt  button gt       lt div id  status  gt   lt  div gt        Note  need to add polyfill  not supported in all browser     Live Example

User · Answer

If your code is placed in a class you could use a decorator for that  You have such decorator in the utils-decorators  npm install --save utils-decorators   It will cancel the previous invocation of the decorated method if before the resolving of the previous call there was made another call for that specific method  import  cancelPrevious  from  utils-decorators    class SomeService        cancelPrevious      doSomeAsync    Promise lt any gt                     or you could use a wrapper function  import  cancelPreviousify  from  utils-decorators    const cancelable   cancelPreviousify originalMethod   https   github com vlio20 utils-decorators cancelprevious-method

User · Answer

There are a few npm libraries for cancellable promises    p-cancelable https   github com sindresorhus p-cancelable cancelable-promise https   github com alkemics CancelablePromise

[javascript] Cancel a vanilla ECMAScript 6 Promise chain

Examples related to javascript

Examples related to promise

Examples related to cancellation

Examples related to es6-promise