While working with Promise and async/await as it's executor function in an example, I observed a behavior which I can'e understand clearly. On executing either of following cases throws "UnhandledPromiseRejectionWarning" warning:
Case-1
new Promise(async function(resolve, reject) {
var x = await new Promise(
function(res, rej) {setTimeout(function() { rej("3b") }, 2000)
});
resolve(x);
}).then(function(result) {
console.log("3b. Result: " + result);
}).catch(function(err) {
console.log("3b. Error: " + err);
});
Case-2
new Promise(async function(resolve, reject) {
var x = await new Promise(
function(res, rej) { throw "3c" }
);
resolve(x);
}).then(function(result) {
console.log("3c. Result: " + result);
}).catch(function(err) {
console.log("3c. Error: " + err);
});
However if I enclose the async function's code block in try-catch like:
new Promise(async function(resolve, reject) {
try {
var x = await new Promise(
function(res, rej) { throw "3c" }
);
resolve(x);
}
catch (err) {
reject(err);
}
}).then(function(result) {
console.log("3c. Result: " + result);
}).catch(function(err) {
console.log("3c. Error: " + err);
});
It outputs "3c. Error: 3c"(similarly for Case-1, the output becomes "3b. Error: 3b" after applying try-catch).
On the other hand if I use similar async function inside then handler and without try-catch, it doesn't cause any "UnhandledPromiseRejectionWarning":
Case-3
new Promise(async function(resolve, reject) {
var x = await new Promise(
function(res, rej) { setTimeout(function() { res("3d-1") }, 1000) }
);
return resolve(x);
}).then(async function(result) {
console.log("3d-1. Result: " + result);
var x = await new Promise(function(res, rej) { setTimeout(function() { rej("3d-2") }, 2000) });
return x;
}).then(function(result) {
console.log("3d-2. Result: " + result);
}).catch(function(err) {
console.log("3d. Error: " + err);
});
Case-4
new Promise(async function(resolve, reject) {
var x = await new Promise(function(res, rej) { setTimeout(function() { res("3e-1") }, 1000) });
return resolve(x);
}).then(async function(result) {
console.log("3e-1. Result: " + result);
var x = await new Promise(function(res, rej) { throw "3e-2" }); // Throwing error from timer can't be handled and hence program crashes.
return x;
}).then(function(result) {
console.log("3e-2. Result: " + result);
}).catch(function(err) {
console.log("3e. Error: " + err);
});
Here it outputs: 3d-1. Result: 3d-1, 3d. Error: 3d-2 for Case-3(and similar for Case-4).
As we can see Case-3 and Case-4 are quite similar with Case-1 and Case-2 respectively, with the difference that the rejection(or throw) now happens inside then block. Here I don't put the rejection blocks inside try-catch but still it works.
Someone please help me understand this behavior of async-await and Promise.
Thanks in advance.
