How to properly reuse a value returned by a promise for multiple functions

Question

My Java trained mind still struggles to understand Javascript and the use of promises. I have the following setup:

function foo() {
  return Promise.resolve('foo');
}

Function foo returns a value that is needed in both functions bar and baz:

function bar(foo) {
  // process and use foo
  return Promise.resolve('bar');
}

function baz(foo,bar) {
  return Promise.resolve(foo+bar);
}

Since baz() uses the result of foo() and bar() I had to chain them like this:

foo()
    .then((foo)=>{
      return bar(foo)
        .then((bar)=>{
          return baz(foo,bar);
        })
    })
    .then(console.log);

Depending on the number of functions that follow baz (that also need the results of the previous functions) this seems to get ugly pretty quickly.

Is there an alternative way, that is easier to read/ more straight forward?

A promise object is immutable. So you once it gets resolved it stays so as long as you close the browser tab. Once you do like `pr = foo(); pr.then(function(val) {doSomething(val)})` `val` won't change how many separate times you call pr.then(). So this way you can share the return value of the promise in as many other functions as you may like. — Redu, Jul 11 '16 at 13:12

score 0 · Accepted Answer · answered Jul 11 '16 at 10:13

0

Just use async / await:

;(async ()=> {
  const fooResult = await foo()
  console.log(await baz(fooResult, await bar(fooResult)))
})()

answered Jul 11 '16 at 10:13

Michał Perłakowski

88,409
26
156
177

Is this already supported by browsers or node.js? I thought this is still in the pipeline for ES7. – Rhayene Jul 11 '16 at 10:21
@Rhayene It's currently in stage 3, but it's already supported by Edge. You can use Babel to compile your code to make it work in all browsers. – Michał Perłakowski Jul 11 '16 at 10:24
"ES7" has already been released as ES2016, it did not include async/await, currently the TC is aiming for next year. Hopefully they'll make it. – Benjamin Gruenbaum Jul 11 '16 at 11:15
Node supports async/await now - so I could accept it know :) – Rhayene Mar 15 '17 at 20:08

James Wakefield · Answer 2 · 2016-07-15T16:52:15.493

There is no need for future Async syntax. I am sort of scared that feature will get abused.

const
  foo = () =>
  Promise.resolve('foo')

, bar = foo =>
  Promise.resolve('bar')

, baz = (foo, bar) =>
  Promise.resolve(foo + bar)

, delay = (ms, p) =>
  new Promise(res =>
    setTimeout(res, ms, p))

, randWait = p =>
  delay(Math.random() * 5000, p)

, log = a => console.log(a) || a

, str = a =>
  JSON.stringify(a, null, 2)
  //Assuming bar needs to be called after foo has returned
  //because of call signature in bar

foo().then(f => bar(f).then(b => baz(f, b)).then(log))

//using Promise.all in a block so p doesn't become global
//be carefull to ensure the call order lines up with 
//the next then call you can also pass your previous resolved
// promises along in the array
{
  let p; //temporary holder
  Promise.all([p = foo(), p = p.then(bar)]).then(([f, b]) =>
    Promise.all([f, b, baz(f, b)])).then(log)
}

//To have named promises you can use an object instead
//of an array if you use something like this
const resolver = o => {
  var keys = Object.keys(o)
  return Promise.all(keys.map(a => o[a])).then((a, i) =>
    a.reduce((o, v, i) =>
      (o[keys[i]] = v, o), {}))
}

, fooPromise = randWait(foo())

, barPromise = fooPromise.then(bar)

, bazPromise = resolver({
  b: barPromise,
  f: fooPromise
}).then(({
  f, b
}) => baz(f, b))

, annoyingWait = randWait(bazPromise).then(a => 'did you really need to wait for me? ' + a)

, all = resolver({
  annoyingWait, randWait, fooPromise, barPromise, bazPromise, nonPromise: 45, hiMom: delay(4000, 'hi')
})

//Using Await takes a lot of the power away from promises
//because, while it may not block the whole system, it will often
//unneccesarily pause parts of the code. Promises can give you a
//much more fine gain control over async events.

, justFooBazAndBar = resolver({
  foo: fooPromise,
  baz: bazPromise,
  bar: barPromise
})

all.then(str).then(log)

justFooBazAndBar.then(log).then(o =>
  //merge the object to be available to to the next promise
  //use object.assign because promises results should always
  //be immutable.
  Object.assign({}, o, {
    altBar: bar(o.foo + '2', o.bar + '2')
  })).then(str).then(log)

I'm sorry if my example was lacking or I still don't understand (I'm still a beginner here :)): how do I use the result of `foo()` in `bar(foo)` in your Promise.all example? — Rhayene, Jul 11 '16 at 14:08

How to properly reuse a value returned by a promise for multiple functions

2 Answers2