CODEWITHSUNDEEP
javascriptjqueryecmascript-6es6-promise
Wayne
Wayne

Reputation: 765

Promise is rejecting even tho it is true

If lunchTime is true lunch object should be logged if false err should be.

The console is logging: Error: OOOOOPs
Even if I try to log the lunch object in the then statement it just logs the error message

My plan was to just manually switch the value of lunchTime to false so that I could test the resolve/reject part of promises, but it's running the catch part of the code even tho it should be resolving.

const lunchTime = true;
    
    function orderMeSomeFood() {
        return new Promise((resolve, reject) => {
            if (lunchTime === true) {
                let lunch = {
                    food: "BBQ",
                    drink: "Zen WTR"
                };
    
                resolve(lunch);
            }
            else if (lunchTime === false) {
        const err = new Error('OOOOOPs')
        reject(err);
    }
            }
        })
    };
    
    orderMeSomeFood().then(() => {
        console.log(resolve);
    }).catch(() => {
        console.log(Error('OOOOOPs'));
    })

Upvotes: 0

Views: 72

Answers (2)

Shoejep
Shoejep

Reputation: 4849

resolve only exists within the promise, so when you do console.log(resolve); it's throwing an error, which is why you're seeing the OOOOOPs message.

If you want to console.log the lunch variable, you should change your code to:

orderMeSomeFood().then(lunch => {
    console.log(lunch);
}).catch(() => {
    console.log(Error('OOOOOPs'));
})


const lunchTime = true;
    
    function orderMeSomeFood() {
        return new Promise((resolve, reject) => {
            if (lunchTime === true) {
                let lunch = {
                    food: "BBQ",
                    drink: "Zen WTR"
                };
    
                resolve(lunch);
            }
            else if (lunchTime === false) {
        const err = new Error('OOOOOPs')
        reject(err);
            }
        })
    };
    
    orderMeSomeFood().then(lunch => {
        console.log(lunch);
    }).catch(() => {
        console.log(new Error('OOOOOPs'));
    })

Upvotes: 1

jfriend00
jfriend00

Reputation: 708026

The problem is actually with this line of code:

console.log(resolve);

which perhaps you meant to be:

console.log("resolved");

instead. The actual resolve variable and value only exists inside the new Promise() executor function, not elsewhere. So, this throws an exception.

In case you didn't realize this, an exception inside a .then() or .catch() handler will trigger the next .catch() handler in the promise chain to get called. So, when the above exception happens inside the .then() handler, that causes code execution to jump to the next .catch() handler.

If you add this debugging:

    orderMeSomeFood().then(() => {
        console.log("got to .then() handler");
        console.log(resolve);
    }).catch((e) => {
        console.log(e);
    });

Then, you will see that it got to the .then() handler and then you will see that the actual error in the catch handler is ReferenceError: resolve is not defined and the line number will point to console.log(resolve) as the offending statement.

A lesson here is to ALWAYS log the actual exception you get in the .catch() because that will usually be a useful hint at to why your code got there.

Here's a runnable version with more logging that shows you the actual flow:

const lunchTime = true;

function orderMeSomeFood() {
    return new Promise((resolve, reject) => {
        if (lunchTime === true) {
            let lunch = {
                food: "BBQ",
                drink: "Zen WTR"
            };
            console.log("about to resolve promise");
            resolve(lunch);
        } else if (lunchTime === false) {
            console.log("about to reject promise");
            reject(new Error('OOOOOPs'));
        }
    })
};

orderMeSomeFood().then(() => {
    console.log("got to .then() handler");
    console.log(resolve);
}).catch((e) => {
    console.log("got to .catch() handler");
    console.log(e.message, e.stack);
})

That provides this output:

about to resolve promise
got to .then() handler
got to .catch() handler
resolve is not defined ReferenceError: resolve is not defined
    at https://stacksnippets.net/js:32:17

So, you can see the follow:

  1. It resolved the promise
  2. It got to the .then() handler.
  3. Inside that .then() handler on the console.log(resolve) line of code, it threw an exception
  4. That sends it to the .catch() handler where it now logs the cause of the error

Upvotes: 2

Related Questions