• Case 1

new Promise((resolve, reject) => {
    resolve(1);
})
    .then((result) => console.log(result))
    .catch((error) => console.log(error))
    
new Promise((resolve, reject) => {
    reject('Error!');
})
    .then((result) => console.log(result))
    .catch((error) => console.log(error))

new Promise((resolve, reject) => {
    resolve(3);
})
    .then((result) => console.log(result))
    .catch((error) => console.log(error))

Result of expect: 1 – Error! – 3
Result of actual: 1 – 3 – Error!

=> When push Promise’s Handler into MicroTask queue, I think there is a priority: .then() > .catch()

• Case 2.1

new Promise((resolve, reject) => {
    resolve(1);
})
    .finally(() => console.log('Promise settled! 1'))
    .then((result) => console.log(result))
    .catch((error) => console.log(error))
    
new Promise((resolve, reject) => {
    reject('Error!');
})
    .then((result) => console.log(result))
    .catch((error) => console.log(error))
    .finally(() => console.log('Promise settled! 2'))

new Promise((resolve, reject) => {
    resolve(3);
})
    .then((result) => console.log(result))
    .catch((error) => console.log(error))
    .finally(() => console.log('Promise settled! 3'))

Result of expect: Promise settled! 1 – Error! – 3 – 1 – Promise settled! 2 – Promise settled! 3
Result of actual: Promise settled! 1 – 3 – Error! – Promise settled! 2 – Promise settled! 3 – 1

=> When push Promise’s Handler into MicroTask queue, I think there is a priority: .finally() > .then() > .catch()

• Case 2.2

new Promise((resolve, reject) => {
    resolve(1);
})
    .finally(() => console.log('Promise settled! 1'))
    .then((result) => console.log(result))
    .catch((error) => console.log(error))
    
new Promise((resolve, reject) => {
    reject('Error! 2');
})
    .finally(() => console.log('Promise settled! 2'))
    .then((result) => console.log(result))
    .catch((error) => console.log(error))

new Promise((resolve, reject) => {
    reject('Error! 3');
})
    .then((result) => console.log(result))
    .catch((error) => console.log(error))
    .finally(() => console.log('Promise settled! 3'))

new Promise((resolve, reject) => {
    resolve(4);
})
    .then((result) => console.log(result))
    .catch((error) => console.log(error))
    .finally(() => console.log('Promise settled! 4'))

Result of expect: Promise settled! Promise settled! 1 – Promise settled! 2 – Error! 3 – 4 – 1 – Error! 2 – Promise settled! 3 – Promise settled! 4
Result of actual: Promise settled! Promise settled! 1 – Promise settled! 2 – 4 – Error! 3 – Promise settled! 3 – Promise settled! 4 – 1 – Error! 2

=> When push Promise’s Handler into MicroTask queue, I think there is a priority: .finally() > .then() > .catch()

I don’t know if my thinking is correct? Hope you guys have experience explaining how it works. Many thanks!