How do I access previous promise results in a then chain

Question

I have restructured my code to promises  and built a wonderful long flat promise chain  consisting of multiple  then   callbacks  In the end I want to return some composite value  and need to access multiple intermediate promise results  However the resolution values from the middle of the sequence are not in scope in the last callback  how do I access them   function getExample         return promiseA      then function resultA               Some processing         return promiseB              then function resultB               More processing         return    How do I gain access to resultA here

User · Answer

What I learn about promises is to use it only as return values avoid referencing them if possible. async/await syntax is particularly practical for that. Today all latest browsers and node support it: https://caniuse.com/#feat=async-functions , is a simple behavior and the code is like reading synchronous code, forget about callbacks...

In cases I do need to reference a promises is when creation and resolution happen at independent/not-related places. So instead an artificial association and probably an event listener just to resolve the "distant" promise, I prefer to expose the promise as a Deferred, which the following code implements it in valid es5

/**
 * Promise like object that allows to resolve it promise from outside code. Example:
 *
```
class Api {
  fooReady = new Deferred<Data>()
  private knower() {
    inOtherMoment(data=>{
      this.fooReady.resolve(data)
    })
  }
}
```
 */
var Deferred = /** @class */ (function () {
  function Deferred(callback) {
    var instance = this;
    this.resolve = null;
    this.reject = null;
    this.status = 'pending';
    this.promise = new Promise(function (resolve, reject) {
      instance.resolve = function () { this.status = 'resolved'; resolve.apply(this, arguments); };
      instance.reject = function () { this.status = 'rejected'; reject.apply(this, arguments); };
    });
    if (typeof callback === 'function') {
      callback.call(this, this.resolve, this.reject);
    }
  }
  Deferred.prototype.then = function (resolve) {
    return this.promise.then(resolve);
  };
  Deferred.prototype.catch = function (r) {
    return this.promise.catch(r);
  };
  return Deferred;
}());

transpiled form a typescript project of mine:

https://github.com/cancerberoSgx/misc-utils-of-mine/blob/2927c2477839f7b36247d054e7e50abe8a41358b/misc-utils-of-mine-generic/src/promise.ts#L31

For more complex cases I often use these guy small promise utilities without dependencies tested and typed. p-map has been useful several times. I think he covered most use cases:

https://github.com/sindresorhus?utf8=%E2%9C%93&tab=repositories&q=promise&type=source&language=

User · Answer

function getExample         var retA  retB      return promiseA      then function resultA            retA   resultA             Some processing         return promiseB              then function resultB               More processing           retA is value of promiseA         return    How do I gain access to resultA here              easy way  D

User · Answer

This days  I also hava meet some questions like you  At last  I find a good solution with the quesition  it s simple and good to read  I hope this can help you   According to how-to-chain-javascript-promises  ok  let s look at the code   const firstPromise        gt        return new Promise  resolve  reject    gt            setTimeout      gt                console log  first promise is completed                resolve  data   123                2000               const secondPromise    someStuff    gt        return new Promise  resolve  reject    gt            setTimeout      gt                console log  second promise is completed                resolve  newData     someStuff data  some more data                2000               const thirdPromise    someStuff    gt        return new Promise  resolve  reject    gt            setTimeout      gt                console log  third promise is completed                resolve  result  someStuff               2000               firstPromise        then secondPromise       then thirdPromise       then data   gt            console log data

User · Answer

Mutable contextual state  The trivial  but inelegant and rather errorprone  solution is to just use higher-scope variables  to which all callbacks in the chain have access  and write result values to them when you get them   function getExample         var resultA      return promiseA      then function  resultA            resultA    resultA             some processing         return promiseB              then function resultB               more processing         return    something using both resultA and resultB             Instead of many variables one might also use an  initially empty  object  on which the results are stored as dynamically created properties   This solution has several drawbacks    Mutable state is ugly  and global variables are evil  This pattern doesn t work across function boundaries  modularising the functions is harder as their declarations must not leave the shared scope The scope of the variables does not prevent to access them before they are initialized  This is especially likely for complex promise constructions  loops  branching  excptions  where race conditions might happen  Passing state explicitly  a declarative design that promises encourage  forces a cleaner coding style which can prevent this  One must choose the scope for those shared variables correctly  It needs to be local to the executed function to prevent race conditions between multiple parallel invocations  as would be the case if  for example  state was stored on an instance    The Bluebird library encourages the use of an object that is passed along  using their bind   method to assign a context object to a promise chain  It will be accessible from each callback function via the otherwise unusable this keyword  While object properties are more prone to undetected typos than variables  the pattern is quite clever   function getExample         return promiseA           bind        Bluebird only       then function resultA            this resultA   resultA             some processing         return promiseB              then function resultB               more processing         return    something using both this resultA and resultB        bind       don t forget to unbind the object if you don t want the                   caller to access it     This approach can be easily simulated in promise libraries that do not support  bind  although in a somewhat more verbose way and cannot be used in an expression    function getExample         var ctx           return promiseA           then function resultA            this resultA   resultA             some processing         return promiseB             bind ctx   then function resultB               more processing         return    something using both this resultA and resultB       bind ctx

User · Answer

Break the chain  When you need to access the intermediate values in your chain  you should split your chain apart in those single pieces that you need  Instead of attaching one callback and somehow trying to use its parameter multiple times  attach multiple callbacks to the same promise - wherever you need the result value  Don t forget  a promise just represents  proxies  a future value  Next to deriving one promise from the other in a linear chain  use the promise combinators that are given to you by your library to build the result value   This will result in a very straightforward control flow  clear composition of functionalities and therefore easy modularisation   function getExample         var a   promiseA           var b   a then function resultA               some processing         return promiseB                   return Promise all  a  b   then function  resultA  resultB                more processing         return    something using both resultA and resultB             Instead of the parameter destructuring in the callback after Promise all that only became avail shy able with ES6  in ES5 the then call would be replaced by a nifty helper method that was provided by many promise libraries  Q  Bluebird  when         spread function resultA  resultB          Bluebird also features a dedicated join function to replace that Promise all spread combination with a simpler  and more efficient  construct       return Promise join a  b  function resultA  resultB

User · Answer

I am not going to use this pattern in my own code since I m not a big fan of using global variables  However  in a pinch it will work   User is a promisified Mongoose model   var globalVar        User findAsync     then function users     globalVar   users     then function      console log globalVar

User · Answer

A less harsh spin on  Mutable contextual state   Using a locally scoped object to collect the intermediate results in a promise chain is a reasonable approach to the question you posed  Consider the following snippet   function getExample          locally scoped     const results           return promiseA paramsA  then function resultA           results a   resultA          return promiseB paramsB          then function resultB           results b   resultB          return promiseC paramsC          then function resultC             Resolve with composite of all promises         return Promise resolve results a   results b   resultC          catch function error           return Promise reject error                Global variables are bad  so this solution uses a locally scoped variable which causes no harm   It is only accessible within the function  Mutable state is ugly  but this does not mutate state in an ugly manner   The ugly mutable state traditionally refers to modifying the state of function arguments or global variables  but this approach simply modifies the state of a locally scoped variable that exists for the sole purpose of aggregating promise results   a variable that will die a simple death once the promise resolves  Intermediate promises are not prevented from accessing the state of the results object  but this does not introduce some scary scenario where one of the promises in the chain will go rogue and sabotage your results   The responsibility of setting the values in each step of the promise is confined to this function and the overall result will either be correct or incorrect   it will not be some bug that will crop up years later in production  unless you intend it to   This does not introduce a race condition scenario that would arise from parallel invocation because a new instance of the results variable is created for every invocation of the getExample function

User · Answer

Node 7 4 now supports async await calls with the harmony flag   Try this    async function getExample       let response   await returnPromise       let response2   await returnPromise2       console log response  response2      getExample     and run the file with   node --harmony-async-await getExample js  Simple as can be

User · Answer

Nesting  and  closures  Using closures for maintaining the scope of variables  in our case  the success callback function parameters  is the natural JavaScript solution  With promises  we can arbitrarily nest and flatten  then   callbacks - they are semantically equivalent  except for the scope of the inner one   function getExample         return promiseA      then function resultA               some processing         return promiseB      then function resultB                   more processing             return    something using both resultA and resultB                          Of course  this is building an indentation pyramid  If indentation is getting too large  you still can apply the old tools to counter the pyramid of doom  modularize  use extra named functions  and flatten the promise chain as soon as you don t need a variable any more  In theory  you can always avoid more than two levels of nesting  by making all closures explicit   in practise use as many as are reasonable   function getExample            preprocessing     return promiseA      then makeAhandler          function makeAhandler          return function resultA               some processing         return promiseB      then makeBhandler resultA                  function makeBhandler resultA             return function resultB               more processing         return    anything that uses the variables in scope            You can also use helper functions for this kind of partial application  like   partial from Underscore lodash or the native  bind   method  to further decrease indentation   function getExample            preprocessing     return promiseA      then handlerA     function handlerA resultA           some processing     return promiseB      then handlerB bind null  resultA      function handlerB resultA  resultB           more processing     return    anything that uses resultA and resultB

User · Answer

ECMAScript Harmony Of course  this problem was recognized by the language designers as well  They did a lot of work and the async functions proposal finally made it into ECMAScript 8 You don t need a single then invocation or callback function anymore  as in an asynchronous function  that returns a promise when being called  you can simply wait for promises to resolve directly  It also features arbitrary control structures like conditions  loops and try-catch-clauses  but for the sake of convenience we don t need them here  async function getExample         var resultA   await promiseA              some processing     var resultB   await promiseB              more processing     return    something using both resultA and resultB    ECMAScript 6 While we were waiting for ES8  we already did use a very similar kind of syntax  ES6 came with generator functions  which allow breaking the execution apart in pieces at arbitrarily placed yield keywords  Those slices can be run after each other  independently  even asynchronously - and that s just what we do when we want to wait for a promise resolution before running the next step  There are dedicated libraries  like co or task js   but also many promise libraries have helper functions  Q  Bluebird  when       that do this async step-by-step execution for you when you give them a generator function that yields promises  var getExample   Promise coroutine function                                          Bluebird syntax     var resultA   yield promiseA              some processing     var resultB   yield promiseB              more processing     return    something using both resultA and resultB      This did work in Node js since version 4 0  also a few browsers  or their dev editions  did support generator syntax relatively early  ECMAScript 5 However  if you want need to be backward-compatible you cannot use those without a transpiler  Both generator functions and async functions are supported by the current tooling  see for example the documentation of Babel on generators and async functions  And then  there are also many other compile-to-JS languages that are dedicated to easing asynchronous programming  They usually use a syntax similar to await   e g  Iced CoffeeScript   but there are also others that feature a Haskell-like do-notation  e g  LatteJs  monadic  PureScript or LispyScript

User · Answer

Synchronous inspection  Assigning promises-for-later-needed-values to variables and then getting their value via synchronous inspection  The example uses bluebird s  value   method but many libraries provide similar method   function getExample         var a   promiseA            return a then function                some processing         return promiseB              then function resultB               a is guaranteed to be fulfilled here so we can just retrieve its            value synchronously         var aValue   a value                This can be used for as many values as you like   function getExample         var a   promiseA            var b   a then function             return promiseB                   var c   b then function             return promiseC                    var d   c then function             return promiseD                    return d then function             return a value     b value     c value     d value

User · Answer

When using bluebird  you can use  bind method to share variables in promise chain   somethingAsync   bind      spread function  aValue  bValue        this aValue   aValue      this bValue   bValue      return somethingElseAsync aValue  bValue       then function  cValue        return this aValue   this bValue   cValue        please check this link for further information   http   bluebirdjs com docs api promise bind html

User · Answer

I think you can use hash of RSVP   Something like as below        const mainPromise        gt            const promise1   new Promise  resolve  reject    gt                setTimeout      gt                    console log  first promise is completed                    resolve  data   123                    2000                        const promise2   new Promise  resolve  reject    gt                setTimeout      gt                    console log  second promise is completed                    resolve  data   456                    2000                        return new RSVP hash                 prom1  promise1                prom2  promise2                            mainPromise        then data   gt            console log data prom1           console log data prom2

User · Answer

Another answer  using sequential executor nsynjs   function getExample       var response1   returnPromise1   data        promise1 is resolved at this point    data  has the result from resolve result     var response2   returnPromise2   data        promise2 is resolved at this point    data  has the result from resolve result     console log response  response2       nynjs run getExample    function        console log  all done         Update  added working example   x000D   x000D  function synchronousCode     x000D       var urls   x000D            https   ajax googleapis com ajax libs jquery 1 7 0 jquery min js   x000D            https   ajax googleapis com ajax libs jquery 1 8 0 jquery min js   x000D            https   ajax googleapis com ajax libs jquery 1 9 0 jquery min js  x000D          x000D       for var i 0  i lt urls length  i      x000D           var len window fetch urls i   data text   data length  x000D                                                x000D                                               - 2-nd promise result x000D                                                 assigned to  data  x000D                            x000D                           -- 1-st promise result assigned to  data  x000D              x000D           console log  URL    i       urls i     length    len   x000D         x000D    x000D   x000D  nsynjs run synchronousCode    function    x000D      console log  all done    x000D     x000D   lt script src  https   rawgit com amaksr nsynjs master nsynjs js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Another answer  using babel-node version  lt 6   Using async - await   npm install -g babel 5 6 14  example js   async function getExample       let response   await returnPromise       let response2   await returnPromise2       console log response  response2      getExample     Then  run babel-node example js and voila

User · Answer

Explicit pass-through  Similar to nesting the callbacks  this technique relies on closures  Yet  the chain stays flat - instead of passing only the latest result  some state object is passed for every step  These state objects accumulate the results of the previous actions  handing down all values that will be needed later again plus the result of the current task   function getExample         return promiseA      then function resultA               some processing         return promiseB      then b   gt   resultA  b       function b    return  resultA  b           then function  resultA  resultB                more processing         return    something using both resultA and resultB             Here  that little arrow b   gt   resultA  b  is the function that closes over resultA  and passes an array of both results to the next step  Which uses parameter destructuring syntax to break it up in single variables again   Before destructuring became available with ES6  a nifty helper method called  spread   was pro shy vi shy ded by many promise libraries  Q  Bluebird  when        It takes a function with multiple parameters - one for each array element - to be used as  spread function resultA  resultB          Of course  that closure needed here can be further simplified by some helper functions  e g   function addTo x           imagine complex  arguments  fiddling or anything that helps usability        but you get the idea with this simple one      return res   gt   x  res          return promiseB      then addTo resultA      Alternatively  you can employ Promise all to produce the promise for the array   function getExample         return promiseA      then function resultA               some processing         return Promise all  resultA  promiseB            resultA will implicitly be wrapped                                                        as if passed to Promise resolve          then function  resultA  resultB                more processing         return    something using both resultA and resultB             And you might not only use arrays  but arbitrarily complex objects  For example  with   extend or Object assign in a different helper function   function augment obj  name        return function  res    var r   Object assign     obj   r name    res  return r        function getExample         return promiseA      then function resultA               some processing         return promiseB      then augment  resultA    resultB            then function obj               more processing         return    something using both obj resultA and obj resultB             While this pattern guarantees a flat chain and explicit state objects can improve clarity  it will become tedious for a long chain  Especially when you need the state only sporadically  you still have to pass it through every step  With this fixed interface  the single callbacks in the chain are rather tightly coupled and inflexible to change  It makes factoring out single steps harder  and callbacks cannot be supplied directly from other modules - they always need to be wrapped in boilerplate code that cares about the state  Abstract helper functions like the above can ease the pain a bit  but it will always be present

User · Answer

Solution   You can put intermediate values in scope in any later  then  function explicitly  by using  bind   It is a nice solution that doesn t require changing how Promises work  and only requires a line or two of code to propagate the values just like errors are already propagated   Here is a complete example      Get info asynchronously from a server function pGetServerInfo                then value   server info           pGetServerInfo     Write into a file asynchronously function pWriteFile path string               no then value          pWriteFile     The heart of the solution  Write formatted info into a log file asynchronously     using the pGetServerInfo and pWriteFile operations function pLogInfo localInfo            var scope  localInfo localInfo      Create an explicit scope object     var thenFunc p2 bind scope      Create a temporary function with this scope     return  pGetServerInfo   then thenFunc       Do the next  then  in the chain          pLogInfo     Scope of this  then  function is  localInfo localInfo  function p2 serverInfo               Do the final  then  in the chain  Writes  local info  server info      return pWriteFile  log  this localInfo     serverInfo            p2   This solution can be invoked as follows   pLogInfo  local info   then   catch err      Note  a more complex and complete version of this solution has been tested  but not this example version  so it could have a bug

[javascript] How do I access previous promise results in a .then() chain?

Examples related to javascript

Examples related to scope

Examples related to promise

Examples related to bluebird

Examples related to es6-promise