CODEWITHSUNDEEP
promise
user1411469
user1411469

Reputation: 379

Why is promise resolving with undefined?

var firstPromise = new Promise((resolve, reject) => {
  resolve('first promise');
});

firstPromise.then(() => {
  return new Promise((resolve, reject) => {
    resolve('second promise');
  }).then((result) => {
    console.log('hello');
  });
}).then((result) => {
  console.log(result);
});

I know this is not the best way to write this promise chain, but I was wondering why the last .then executes at all. I'm not returning anything with console.log('hello'), so wouldn't the .then off of the second promise never resolve?

Upvotes: 11

Views: 29049

Answers (3)

jfriend00
jfriend00

Reputation: 708126

Because you've chained several promises together and one of your .then() handlers returns nothing.

This part:

.then((result) => {
    console.log('hello');
    // since there is no return value here, 
    // the promise chain's resolved value becomes undefined
});

returns nothing which is essentially the same as return undefined and therefore the resolved value of the chain becomes undefined.

You can change it to this to preserve the resolved value:

.then((result) => {
    console.log('hello');
    return result;         // preserve resolved value of the promise chain
});

Remember that the return value of every .then() handler becomes the resolved value of the chain going forward. No return value makes the resolved value be undefined.

Upvotes: 17

Nilanka Manoj
Nilanka Manoj

Reputation: 3738

You can call any number of then s after the resolve of promise. in your case: //1 resolved promise assigned to //2 results //4 has no returns to work with. So, results are undefined.

var firstPromise = new Promise((resolve, reject) => {
    resolve('first promise');
});

firstPromise.then(() => {
    return new Promise((resolve, reject) => {
        resolve('second promise');//1
    }).then((result) => {
        console.log(result);//2
        console.log('hello');//3
    });
}).then((result) => {
    console.log(result);//4
}).then((result) => {
    console.log(result);
}).then((result) => {
    console.log(result);
}).then((result) => {
    console.log(result);
})

if you have return something after //3 result is assined by it.

var firstPromise = new Promise((resolve, reject) => {
    resolve('first promise');
});

firstPromise.then(() => {
    return new Promise((resolve, reject) => {
        resolve('second promise');//1
    }).then((result) => {
        console.log(result);//2
        console.log('hello');//3
        return("test")
    });
}).then((result) => {
    console.log(result);//4
}).then((result) => {
    console.log(result);
}).then((result) => {
    console.log(result);
}).then((result) => {
    console.log(result);
})

Upvotes: 0

Hugo sama
Hugo sama

Reputation: 909

Your last .then is receiving the result created in your nested Promise, and, since you are not returning anything ( i.e. you are just doing console.log('hello') ) then result is undefined. You can see this behaviour if you actually return something : 

    var firstPromise = new Promise((resolve, reject) => {
      resolve("first promise");
    });

    firstPromise
      .then(() => {
        return new Promise((resolve, reject) => {
          resolve("second promise");
        }).then(result => {
          console.log("hello");
          return "something";
        });
      })
      .then(result => {
        console.log(result);
      });
  }

this would output : 

'hello'
'something'

Upvotes: 0

Related Questions