Pass outer variable into promise .then without calling it

Question

I have a series of promise functions that I'm chaining together. I don't need the specific result from the previous function so I'm not adding anything into resolve(); I just need them to run sequentially.

However, there is a variable in the containing scope that I want to pass into the first and fourth(last) promise. When I add it as a parameter to the third promise, the function runs immediately.

How can I pass a parameter into a chained promise and not call the function/promise at that time?

Here is the basics of what I'm trying to do:

const containingFunction = function() {
        const varToPass = document.querySelector("#ID").value.trim();
        firstPromise(varToPass)
            .then(secondPromise)
            .then(thirdPromise)
            .then(fourthPromise(varToPass))
            .catch(e =>{
               console.error(e)); 
            } );
    };

FourthPromise:

    const fourthPromise = function(varPassed) {
            return new Promise(function(resolve, reject) {
                do some stuff but only after the thirdPromise has been resolved
                console.log(varPassed)
                resolve();
            });
        };

Possible duplicate of [Promises, pass additional parameters to then chain](https://stackoverflow.com/questions/32912459/promises-pass-additional-parameters-to-then-chain) — jib, Jul 30 '17 at 01:27

Hubert Grzeskowiak · Accepted Answer · 2017-07-28T01:31:32.807

You have two possibilities depending on how you want to resolve varToPass.

Lambda

Using a lambda function (anonymous function without own scope) as described by @Jaromanda X:

() => return fourthPromise(varToPass)

which will cause the function to keep a reference to the variable and not its value. The value of varToPass will be evaluated as soon as the fourthPromise is fired, not when this code is run.

Wrapper

The second option is using a wrapper, i.e. a function that returns a function:

function fourthPromise(varToPass) {
    return function() {
        return new Promise(function(resolve, reject) {
            do some stuff but only after the thirdPromise has been resolved
            console.log(varToPass)
            resolve();
        });
    };
}

In this case the value of the passed variable is evaluated at the time this code runs and not when the callback is called.

Which option is better applicable to your case we can't tell without more context though.

To clarify, with wrapper the variable is evaluated but the rest of fourthPromise doesn't get called? — , Jul 28 '17 at 01:12
Correct. The function creates a new scope which involves creating a copy of the `varToPass`. If it's a primitive type (number, string etc.), the value gets copied, otherwise (object, list etc.) a new reference to the object is created. — Hubert Grzeskowiak, Jul 28 '17 at 01:21

score 0 · Answer 2 · answered Jul 28 '17 at 00:57

0

Very simple change

const containingFunction = function() {
    const varToPass = document.querySelector("#ID").value.trim();
    firstPromise(varToPass)
        .then(secondPromise)
        .then(thirdPromise)
        .then(() => fourthPromise(varToPass))
        .catch(e =>{
           console.error(e)); 
        } );
};

answered Jul 28 '17 at 00:57

Jaromanda X

53,868
5
73
87

@jarmandaX why does placing the fourthPromise inside another function prevent it's call until thirdPromise has run? I'm just trying to understand the difference – Jul 28 '17 at 00:58
you are passing a function to .then - whereas in your code, you are passing the result of calling a function to .then – Jaromanda X Jul 28 '17 at 00:59
Would it be best practice to do the same with secondPromise and thirdPromise even if they don't take any params? – Jul 28 '17 at 01:03
@Somethingismissing no – Hubert Grzeskowiak Jul 28 '17 at 01:07
@Somethingismissing - I like to keep the code as simple as possible, so if there's no need to do something, don't do it :p – Jaromanda X Jul 28 '17 at 02:03

Pass outer variable into promise .then without calling it

2 Answers2

Lambda

Wrapper