Promises, how to pass variable into .then function

Question

Hello this is a question to help me understand how Promises .then returns work. The question is: how can I scoped variables to the second .then chained function?

Here is a jsbin http://jsbin.com/xacuna/edit?js,output

I can access the global variables, and pass in the scoped variables to the first then, but not after.

  let innerReturnFunction = (res, myName) => {
    /* this works */
    console.log(`hi from inner name: ${myName}`)
    return res
  }

 let getInnerFuncVariable = () => {
   var myName = 'arturo'

   return fetch('https://httpbin.org/get')
    .then(function (res) {
      myName = 'Bob'
      return innerReturnFunction(res, myName);
    })
    .then(function (res, myName) {
      /* doesn't work, how can I access myName */
      console.log(`in first then ${res.url}, ${myName}`)
    });
 }

getInnerFuncVariable().then(function(res, myName) {
  /* how can I access myName */
  console.log(`last called ${myName}`)
})

the callback in then only accepts a single argument - an `object` would be useful — Jaromanda X, Feb 26 '17 at 03:37
See [How to share prior results when chaining promises](http://stackoverflow.com/questions/28714298/how-to-chain-and-share-prior-results-with-promises/28714863#28714863). — jfriend00, Feb 26 '17 at 03:57

Jaromanda X · Answer 1 · 2017-02-26T03:47:29.160

5

as you are using ES2015 - easy solution uses object Shorthand property names and Object destructuring

let innerReturnFunction = ({res, myName}) => {
    /* this works */
    console.log(`hi from inner name: ${myName}`);
    return {res, myName}; // return an object
}

let getInnerFuncVariable = () => {
    var myName = 'arturo';

    return fetch('https://httpbin.org/get')
        .then(function(res) {
            myName = 'Bob'
            return innerReturnFunction({res, myName});
        })
        .then(function({res, myName}) {
            console.log(`in first then ${res.url}, ${myName}`);
            return {res, myName};// ADD THIS!!
        });
}

getInnerFuncVariable().then(function({res, myName}) {
    console.log(`last called ${myName}`)
})

edited Feb 26 '17 at 03:47

answered Feb 26 '17 at 03:40

Jaromanda X

53,868
5
73
87

Thank you for the response. the callback in then only accepts a single argument, so wrap that one argument as an object. I noticed that .bind on the then callback allows you to pass in additional args. – ArturoRomero Feb 26 '17 at 03:46
3

sure, why use a simple change when you can overcomplicate it using bind – Jaromanda X Feb 26 '17 at 04:03
You are right, bind makes the code look a little more complex. – ArturoRomero Feb 26 '17 at 04:26
@JaromandaX In this case, yes. But what if you want to pass a variable that was declared outside the `getInnerFuncVariable` function? Then wouldn't `bind()` be the only option? – Daniel H Mar 08 '17 at 00:19
Depends on the scope of this mythical variable I guess – Jaromanda X Mar 08 '17 at 00:36

Jay Day Zee · Answer 2 · 2017-06-09T19:03:23.050

When I came across this answer, I was trying to do this:

for (key in updateDict)
{ if ( ! key.startsWith("__"))
  { var updateID        = updateDict[key].id;
    var updateNewValue  = updateDict[key].newValue;

    //store give the function call the ability to store the current value of key
    var storeAndDeleteKey = function(key, updateID, updateNewValue)
    { return atStore.update({"id":updateID}, updateNewValue))
        .then
        ( (docs) => 
          { results[key] = docs;
            delete updateDict[key];
          }
       );
    }

    //put the function with the current value of key into the Promise.all list
    dataAccessPromiseList.push
    ( storeAndDeleteKey(key, updateID, updateNewValue)
    )
  }
}

if (dataAccessPromiseList.length > 0) dataAccessPromise = Promise.all(dataAccessPromiseList);

Promises, how to pass variable into .then function

2 Answers2

Linked