ES6 Promise: catch() was called after then()

Question

The Promise in the following code works correctly, and Ajax request (load() jQuery-function) works too:

changeFragment(newFragment, fragmentUrn) {
    new Promise((resolve, reject) => {
        this.$MainContent.load(fragmentUrn, (response, status, xhr) => {
            //status === 'error' ? reject(xhr) : resolve();
            console.log(status == 'success');
            if (status === 'success'){
                console.log('resolve');
                resolve();
            }
            if (status === 'error') {
                console.log('reject');
                reject(xhr);
            }
        });
    }).then(() => {
        console.log('then');
        let newFragment = newFragment.createInstance();
        newFragment.initialize();
    }).catch((xhr) => {
        console.log('Why!?');
        console.error(`Error : ${xhr.status} ${xhr.statusText}`);
    });
}

However, after then(), somehow catch() was called too. I got the following output in the console:

true
resolve
then
Why!?
Error: undefined undefined

Answer 1

You need to do something like this

Promise.resolve() .then(function() { return Function1().catch(errorHandler1); })

Answer 2

I think because you are not returning the promise, try to return the promise instead of just initalizing it with 'new'.

'then' needs to wait for a Promise that will be returned