can I control the way a promise returned by a then() method resolves

Question

Given I create myPromise. It returns another promise when it resolves.

let myPromise = new Promise((resolve: Function, reject: Function) => {
    setTimeout(() => {
        resolve('my promise resolved after 2 seconds');
     }, 2000);
})


myPromise.then(value => {
    console.log(value);
}).then((value) => {
    // how can I make the promise returned by myPromise.then() 
    //resolve in a specific way ?
})

How can I control the way the promise returned by myPromise.then() resolves ?

I don't understand the question. The promise is already resolved when the `then` function is called. — evolutionxbox, Jun 21 '17 at 13:53
Could you reformulate your question? It's pretty hard to understand the question — dloeda, Jun 21 '17 at 13:54
*return value* , passes value to the next then OR *return new Promise* awaits the new Promise and the next then is its result — Jonas Wilms, Jun 21 '17 at 13:59
In my answer, I gave an example of how to simply return the value, and how to return a new promise. Out of curiosity, which were you trying to do? — Frank Modica, Jun 21 '17 at 14:25

Frank Modica · Answer 1 · 2017-06-21T14:36:34.520

0

If you don't need to do some other async operation, just return the value:

myPromise.then(value => {
    return value;
}).then((value) => {
    // ...
})

But I'm not sure why you'd do this, considering you could just remove the first .then and do everything in the second .then.

If you have to do another async operation, you can return a new promise and resolve it when you need to:

myPromise.then(value => {
    // Do some other async operation. I am explicitly creating the promise 
    // here inline to be clear. In real code, you'd probably want to wrap this 
    // in another function.
    return new Promise((resolve: Function, reject: Function) => {
        resolve(value);
    });
}).then((value) => {
    // ...
})

edited Jun 21 '17 at 14:36

answered Jun 21 '17 at 13:55

Frank Modica

10,238
3
23
39

why not return value; ? – Jonas Wilms Jun 21 '17 at 14:00
You can do that, but the question was already basically doing that using the second `.then`. So I assumed they wanted to do something else async before it the second `.then`. – Frank Modica Jun 21 '17 at 14:01
The second part is an antipattern. There's no need to create a new `Promise` at all. – Daniel B Jun 21 '17 at 14:10
@DanielB if a new async operation has to be done, like an http call, how else would you do it? – Frank Modica Jun 21 '17 at 14:14
Write the function to return a new promise and call `.then(myOtherAsyncFunction)`. Value returned from the first call will be passed as argument to `myOtherAsyncFunction`. – Daniel B Jun 21 '17 at 14:17
So you're still returning a new promise. I'm just doing it inline. Often you'll see something like `return $.ajax...` inline. – Frank Modica Jun 21 '17 at 14:18
Yes, because `$.ajax` returns a promise. You are explicitly constructing a new promise. I see a big difference between those two cases. One is considered an [antipattern](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) while the other isn't. – Daniel B Jun 21 '17 at 14:26
My example was intentional. I am explicitly creating a new promise inline to be clear about what is happening. I didn't want to hide the new promise inside another function. – Frank Modica Jun 21 '17 at 14:28
1

@DanielB I added a comment to clarify that in real code you'd want to wrap the promise. – Frank Modica Jun 21 '17 at 14:37

score 0 · Accepted Answer · answered Jun 21 '17 at 15:33

Inside a .then() handler, you have three choices that all influence the promise returned by that .then() call (I'll refer to it as the "parent" promise).

Return a value. When you return a value from the .then() handler, that value becomes the resolved value of the promise that was returned when .then() was originally called.
Return a promise. When you return a promise from the .then() handler, it is chained to the parent promise and the parent promise will "follow" the new promise (resolve/value, reject/reason).
Throw an exception. This will cause the parent promise to be rejected and the exception becomes the reject reason.

If you return nothing from the .then() handler that is the same as return undefined so it just sets the resolved value to undefined (same as returning a value of undefined).

This structure you show:

myPromise.then(value => {
    console.log(value);
}).then((value) => {
    // how can I make the promise returned by myPromise.then() 
    //resolve in a specific way ?
});

is troublesome because the first .then() handler returns nothing. That is the same as returning undefined and thus the second value is always undefined and thus not useful. If you had some actual reason for the first .then() handler, you could keep the desired value by returning it like this:

myPromise.then(value => {
    console.log(value);
    return value;
}).then((value) => {
    // how can I make the promise returned by myPromise.then() 
    //resolve in a specific way ?
});

can I control the way a promise returned by a then() method resolves

2 Answers2