rejected Promise in try-catch with/without await

Question

The only difference between demo1 & demo2 is that demo2 add a await . How come demo1 did't catch the error and demo2 did?

// demo1
try {
    new Promise((resolve, reject) => {
        resolve()
    }).then(() => { throw new Error('haha') }) // Promise: {status: "rejected", value: Error: haha }
    console.log('irene test') // print 'irene test', execution is over.
} catch(err) { // didn't catch the error
    console.log('irene')
    console.log(err)
}

// demo2
try {
    await new Promise((resolve, reject) => {
        resolve()
    }).then(() => { throw new Error('haha') })
    console.log('irene test') // didn't print 'irene test'
} catch(err) { // catch the error
    console.log('irene') // print 'irene'
    console.log(err) // print err
}

Answer 1

The only difference is that this code:

try {
    new Promise((resolve, reject) => {
        resolve()
    }).then(() => { throw new Error('haha') }) // Promise: {status: "rejected", value: Error: haha }
    console.log('irene test') // print 'irene test', execution is over.
} catch(err) { // didn't catch the error
    console.log('irene')
    console.log(err)
}

is equal to this one:

const someFunction = () => { throw new Error('haha') }
try {
    new Promise((resolve, reject) => {
        resolve()
    }).then(someFunction.bind(this)) // Promise: {status: "rejected", value: Error: haha }
    console.log('irene test') // print 'irene test', execution is over.
} catch(err) { // didn't catch the error
    console.log('irene')
    console.log(err)
}

And as you can see here the someFunction has different scope than the try catch.

Answer 2

In demo1, control flow exits try catch block right after console.log('irene test') . So before you throw an error in Promise, it moves forward. See below.

try{
    new Promise((resolve, reject) => {
        resolve()
    }).then(() => { throw new Error('haha')})
    console.log('irene test')
} catch(err) { // catch the error
    console.log('irene') // print 'irene'
    console.log(err) // print err
}
console.log('already here')

result image You can see error is thrown after 'already here' is printed.

In demo2, as you know, promise remains in try catch block until error is thrown. (because that's what await do)

Additionally, if you want to print 'irene test' even if there is an error, it's better to use .catch .

new Promise((resolve, reject) => {
  resolve()
}).then(() => { throw new Error('haha')
}).catch(err => console.error(err))
console.log('irene test')

It successfully catches error, and also able to print 'irene test'.