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'));
})
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:
It resolved the promise
It got to the .then() handler.
Inside that .then() handler on the console.log(resolve) line of code, it threw an exception
That sends it to the .catch() handler where it now logs the cause of the error
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'));
})
Related
I have an async callback function, which throws an error if some condition isn't met.
but I get the below error
(node:77284) UnhandledPromiseRejectionWarning: Error: Not Found
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch().
My Code :
async deleteItem(id: string): Promise<void> {
const ref = firestoreDB.collection("items").doc(id);
firestoreDB
.runTransaction(async (transaction: FirebaseFirestore.Transaction) => {
let doc = await transaction.get(ref);
if (doc.exists) {
transaction.delete(ref);
} else {
throw new NotFoundException();
}
})
.catch((err) => {
if (err instanceof NotFoundException) {
throw err;
} else {
throw new HttpException(
"Something went wrong",
HttpStatus.INTERNAL_SERVER_ERROR
);
}
});
}
What is the proper way to throw an error from the callback function?
In looking at code examples for .runTransaction(), it looks like it returns a promise and will propagate a promise rejections from its callback (that's a bit of a different interface for a plain callback), but in any case, it looks like you just need to return the promise from firestoreDB.runTransaction() from your deleteItem() method and then make sure the caller of that method is using .catch() to handler any errors.
async deleteItem(id: string): Promise<void> {
const ref = firestoreDB.collection("items").doc(id);
// add return here
return firestoreDB
.runTransaction(async (transaction: FirebaseFirestore.Transaction) => {
let doc = await transaction.get(ref);
if (doc.exists) {
transaction.delete(ref);
} else {
throw new NotFoundException();
}
})
.catch((err) => {
if (err instanceof NotFoundException) {
throw err;
} else {
throw new HttpException(
"Something went wrong",
HttpStatus.INTERNAL_SERVER_ERROR
);
}
});
}
Then, wherever you call .deleteItem():
obj.deleteItem(...).catch(err => {
// handle error here
});
I have some code which calls Promise.all. It runs OK in the browser with no warnings in the console.
There are 3 functions f1, f2 & f3 all of which return a promise. The code looks like this
Promise.all([
f1(),
f2(),
f3()
]).then((values) => {
resolve({success: true})
}).catch(err => {
reject(err)
})
When I use Jest to test the file containing the above code I see this error.
(node:17177) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 18)
Is this the wrong way to code the above or is it a bug within Jest?
Here's the actual code that I'm using:
getDataFromDatabase() {
return new Promise((resolve, reject) => {
const assessmentUrl = `${this.assessmentUrl}`
http.get(assessmentUrl).then(response => {
if (response.data.record === null) {
Promise.all([
this._getPupilPlacement(),
this._getSurveyQuestions(),
this._getCompetencies()
]).then((values) => {
successState.pupilPlacement = values[0].pupilPlacement
successState.items = values[1].items
successState.formid = values[2].formid
successState.competencies = values[3].competencies
const panels = this.getPanels(values[3].competencies)
successState.panels = panels
successState.numPages = panels.length
successState.itemsAreOverridden = true
resolve(successState)
}).catch(err => {
reject(err)
})
}
else {
resolve(response.data.record)
}
})
})
}
Avoid the Promise constructor antipattern! You were forgetting to handle errors from the http.get(assessmentUrl) promise.
You should be writing
getDataFromDatabase() {
const assessmentUrl = `${this.assessmentUrl}`
return http.get(assessmentUrl).then(response => {
//^^^^^^
if (response.data.record !== null)
return response.data.record;
return Promise.all([
// ^^^^^^
this._getPupilPlacement(),
this._getSurveyQuestions(),
this._getCompetencies()
]).then(values => {
const panels = this.getPanels(values[3].competencies)
return {
// ^^^^^^
pupilPlacement: values[0].pupilPlacement,
items: values[1].items,
formid: values[2].formid,
competencies: values[3].competencies,
panels: panels,
numPages: panels.length,
itemsAreOverridden: true,
};
});
});
}
Explanation:
Calling reject will throw an error. If your top level promise doesn't catch it, then well it's an unhandled promise.
MDN Image src
Solution:
getDataFromDatabase().catch(err=>console.lor(err.message));
Example of a promise that rejects.:
function getDataFromDatabase(){
return Promise.reject(123);
}
getDataFromDatabase()
.then(data=>console.log("Success " + data))
.catch(err=>console.log("Error " + err));
Promise MDN doc
Future recommendation:
For every child promise you seem to be adding a .catch() which isn't needed. As long as somewhere higher up there is a catch, then the promise will be handled.
I have a Node.js app. This app has a button that starts a process. The steps in that process return promises. I'm trying to chain these promises together. For some reason, I'm receiving an UnhandledPromiseRejectionWarning. However, in my mind, I've set this up correctly. My code looks like this:
var myButton = document.getElementById('myButton');
if (myButton) {
console.log('here');
myButton.addEventListener('click', executeAction('0'));
}
function executeAction(input) {
let param1 = 'A';
let promise = new Promise(function(resolve, reject) {
try {
executeStep1()
.then(result => executeStep2(param1, result, input))
.then(result => function(result) {
console.log('All done');
resolve(result);
})
.catch(err => reject(err))
;
} catch (ex) {
reject(ex);
}
});
return promise;
}
function executeStep1() {
let promise = new Promise(function(resolve, reject) {
try {
setTimeout(function() {
resolve('[something]');
}, 3000);
} catch (ex) {
reject();
}
});
return promise;
}
function executeStep2(p1, p2, p3) {
let promise = new Promise(function(resolve, reject) {
try {
setTimeout(function() {
console.log('step 2 has executed');
resolve('awesome!')
}, 3000);
} catch (ex) {
reject(ex);
}
});
return promise;
}
I've confirmed that the executeStep2 function runs to completion. I'm basing this in the fact that I can see "step 2 has executed" in the console window. However, to my surprise, I never see "All done" printed in the console window. Instead, I see the UnhandledPromiseRejectionWarning mentioned above. I don't understand two things about this result:
Why am I not seeing "All done" in the console? Shouldn't that function get executed after executeStep2 has resolved?
Where is the rejection coming from? I don't see anything that's rejecting this.
Thank you very much for your help!
executeStep1()
.then(result => executeStep2(param1, result, input))
.then(result => { // no function(result) here
console.log('All done');
resolve(result);
})
.catch(err => reject(err))
;
The error is generated from when you call the function(s) that uses promises:
myButton.addEventListener('click', executeAction('0'));
You need to catch rejections there also.
myButton.addEventListener('click', executeAction('0')
.catch((error) => console.log('ERROR', error));
The rejections are caught inside the functions, but not in the outer scope because executeAction('0') returns a promise, or it would but you are using it as a non-async function, so its creating a promise and then returning a pending promise without waiting for it to be resolved. That looks like what's causing the rejection, and its also not handled for the above reason.
This will fix it:
function executeAction(input) {
let param1 = 'A';
return new Promise(function(resolve, reject) {
try {
executeStep1()
.then(result => executeStep2(param1, result, input))
.then(result => function(result) {
console.log('All done');
resolve(result);
})
.catch(err => reject(err))
;
} catch (ex) {
reject(ex);
}
});
}
You should look into async/await. It can clean this code up significantly.
async function getSomething() {
try {
// throw 'Test error detected.'
return 'test'
}
catch (e) {
throw e
}
}
async function testing() {
try {
const sample = await getSomething()
return sample
} catch (e) {
throw e
}
}
testing()
.then((data) => console.log(data))
.catch((err) => console.log(err))
Run this above example, and then uncomment the throw. Use this pattern for maximum winning. Exceptions should be thrown to the surface level where the functions are called, displayed, used, rendered, etc. Functions should simply throw the error out.
This allows you to use error handling middleware, higher-order functions, listeners, logging, etc.
How should I stop the promise chain in this case?
Execute the code of second then only when the condition in the first then is true.
var p = new Promise((resolve, reject) => {
setTimeout(function() {
resolve(1)
}, 0);
});
p
.then((res) => {
if(true) {
return res + 2
} else {
// do something and break the chain here ???
}
})
.then((res) => {
// executed only when the condition is true
console.log(res)
})
You can throw an Error in the else block, then catch it at the end of the promise chain:
var p = new Promise((resolve, reject) => {
setTimeout(function() {
resolve(1)
}, 0);
});
p
.then((res) => {
if(false) {
return res + 2
} else {
// do something and break the chain here ???
throw new Error('error');
}
})
.then((res) => {
// executed only when the condition is true
console.log(res)
})
.catch(error => {
console.log(error.message);
})
Demo - https://jsbin.com/ludoxifobe/edit?js,console
You could read the documentation, which says
Promise.then return a rejected Promise if the input function throws an error, or the input function returns a rejected Promise.
If you prefer, you could read the Promise A spec, in the section about then, where promise2 refers to the resulting promise:
If either onFulfilled or onRejected throws an exception e, promise2 must be rejected with e as the reason.)
If you prefer, you could read the excellent 2ality blog:
then() returns a new promise Q (created via the constructor of the receiver):
If either of the reactions returns a value, Q is resolved with it.
If either of the reactions throws an exception, Q is rejected with it.
You could read the brilliant YDKJS:
A thrown exception inside either the fulfillment or rejection handler of a then(..) call causes the next (chained) promise to be immediately rejected with that exception.
You could move the chain into the conditional branch:
p.then((res) => {
if(true) {
return Promise.resolve(res + 2).then((res) => {
// executed only when the condition is true
});
} else {
// do something
// chain ends here
}
});
Just use something like: reject('rejected')
in the else of the first task.
P
.then((res) => {
if(true) {
return res + 2
} else {
reject('rejected due to logic failure' }
})
.then((res) => {
// executed only when the condition is true
console.log(res)
})
Alternatively u can also add a catch section to ur first task with .catch()
Hope this helps.
How should I stop the promise chain in this case?
Execute the code of second then only when the condition in the first then is true.
var p = new Promise((resolve, reject) => {
setTimeout(function() {
resolve(1)
}, 0);
});
p
.then((res) => {
if(true) {
return res + 2
} else {
// do something and break the chain here ???
}
})
.then((res) => {
// executed only when the condition is true
console.log(res)
})
You can throw an Error in the else block, then catch it at the end of the promise chain:
var p = new Promise((resolve, reject) => {
setTimeout(function() {
resolve(1)
}, 0);
});
p
.then((res) => {
if(false) {
return res + 2
} else {
// do something and break the chain here ???
throw new Error('error');
}
})
.then((res) => {
// executed only when the condition is true
console.log(res)
})
.catch(error => {
console.log(error.message);
})
Demo - https://jsbin.com/ludoxifobe/edit?js,console
You could read the documentation, which says
Promise.then return a rejected Promise if the input function throws an error, or the input function returns a rejected Promise.
If you prefer, you could read the Promise A spec, in the section about then, where promise2 refers to the resulting promise:
If either onFulfilled or onRejected throws an exception e, promise2 must be rejected with e as the reason.)
If you prefer, you could read the excellent 2ality blog:
then() returns a new promise Q (created via the constructor of the receiver):
If either of the reactions returns a value, Q is resolved with it.
If either of the reactions throws an exception, Q is rejected with it.
You could read the brilliant YDKJS:
A thrown exception inside either the fulfillment or rejection handler of a then(..) call causes the next (chained) promise to be immediately rejected with that exception.
You could move the chain into the conditional branch:
p.then((res) => {
if(true) {
return Promise.resolve(res + 2).then((res) => {
// executed only when the condition is true
});
} else {
// do something
// chain ends here
}
});
Just use something like: reject('rejected')
in the else of the first task.
P
.then((res) => {
if(true) {
return res + 2
} else {
reject('rejected due to logic failure' }
})
.then((res) => {
// executed only when the condition is true
console.log(res)
})
Alternatively u can also add a catch section to ur first task with .catch()
Hope this helps.