装饰Javascript Promise.then以便参数函数接收附加参数

Question

I have the following code using ES6 Promise :

const ctx = {}
Promise.resolve()
  .then(() => doSomethingWith(ctx))
  .then((retValue) => doSomethingElseWith(retValue, ctx))

I would like to be able to do something like this :

const ctx = {}
using(ctx)
   .then((ctx) => doSomethingWith(ctx))
   .then((retValue, ctx) => doSomethingElseWith(retValue, ctx))

For the first then , I have something like this :

function using(ctx) {
  const p = Promise.resolve()
  p.then = (fn) => withCtx(fn, ctx)
  return p
}

function withCtx (fn, ctx) {
  const p = new Promise((resolve) => {
    resolve(fn.apply(this, [ctx]))
  })
  return p
}

But I would like it to handle the case of the second then that takes both the previous promise returned value and the context... How could I have this part :

fn.apply(this, [ctx]) // want previous promise returned value and ctx here !

handle the case fn already takes a parameter we want to propagate... the retValue case describe above.

Any idea ? (the use case I want to cover after is to be able to stop the Promise chain at any time, persist values on disk and restart at any time with altered context restored from disk)

Answer 1

To be honest I think it's confusing and probably an anti pattern, but can you pass mutable state between promises simply by adding an extra then

Promise.resolve({}) 
.then(ctx => doSomethingWith(ctx)
  .then(ret => ({ret, ctx})))
.then(({ret, ctx}) => doSomethingElseWith(ret, ctx))

The second then is inside the first one and therefore has a closure on the input state, which it can decorate with the transformed value, before passing the mutated context to the next phase. This achieved without leaking any references to the global context.

To show what it looks like if you extend the pattern...

function trans (that, y) {
  console.dir(y);
  return new Promise(res =>
    setTimeout(res.bind(null, that.op(y)), 1000)
  )
}

Promise.resolve({ret: 0, ctx: {op: _ => _ + 2}})
  .then(({ret, ctx}) => trans(ctx, ret)
    .then(ret =>({ ret, ctx}))
  )
  .then(({ret, ctx}) => trans(ctx, ret)
    .then(ret =>({ ret, ctx}))
  )
  .then(({ret, ctx}) => trans(ctx, ret)
    .then(ret =>({ ret, ctx}))
  )
  .then(({ret, ctx}) => trans(ctx, ret)
    .then(ret =>({ ret, ctx}))
  )
  .then(ctx => console.dir(ctx));
  .catch(console.log.bind(console));

Answer 2

The following may be the pattern you are looking for:

something0()
  .then(result0 => something1(ctx, result0)
    .then(result1 => something2(ctx, result0, result1)
      .then(result2 => something3(ctx, result0, result1, result2))
    )
  )
;

Yes, it is a sort of pyramid of doom, but there's no other way to keep the previous results in scope for use later down the chain.

Answer 3

Worth keeping in mind that if you need to pass more than one value through a computation, then you can simply return a list (Array) of multiple values/results from your .then functions:

Promise.resolve(6)
  .then( x => [x+6, x] )
  .then( ([latestVal, oldvalue]) => /*whatever*/ );

There's nothing wrong with this approach and there are various other methods (like unapply/apply you can use to modify your handler functions in order to receive/work with Arrays as return types (which you should really think of as nested types: you're now working over a Promise[Array[...values]] which is actually pretty common pattern.

Note that this works even if some of the values are themselves derived from async operations: just pass them into Promise.all and it will turn an Array of values/Promises into a Promise of an Array, and you can then just destructure the Array to get at your various results.

Promise.resolve(6)
  .then( x => Promise.all([additionApi(x), x]) )
  .then( ([latestVal, ...rest]) => Promise.all( additionApi(x).concat(latest, rest) ) )
  .then( ([latestVal, ...rest]) => Promise.all( additionApi(x).concat(latest, rest) ) );
  //...etc.