trying to change .then, like this:
User.prototype.login = () => {
return new Promise((resolve, reject) => {
this.cleanup();
usersCollection
.findOne({ username: this.data.username })
.then((attemptedUser) => {
if (attemptedUser && attemptedUser.password == this.data.password) {
resolve("logged in");
} else {
reject("invalid something");
}
})
.catch(() => {
reject("Please, try again later");
});
});
First one works perfectly, but when I try to change it to async/await, like this:
User.prototype.login = () => {
return new Promise(async (resolve, reject) => {
this.cleanup();
try {
const attemptedUser = await usersCollection.findOne({ username: this.data.username });
if (attemptedUser && attemptedUser.password == this.data.password) {
resolve("logged in");
} else {
reject("invalid something");
}
} catch {
reject("Please, try again later");
}
});
};
it gives me an error that this.cleanup() is not a function, and after a few tries, I realized that async somehow change "this".
can you please help me, where did I made an error?
2 problems in your code:
Functions defined on a prototype object should be regular functions instead of arrow functions because functions defined on objects are used as methods, i.e. value of this inside them refers to instances of the constructor function or class. Using an arrow function will set incorrect value of this and that is most likely the cause of error in your code.
You have mixed promise-chaining with async-await syntax.async functions always return a Promise, so instead of explicitly returning a Promise object, make login function an async function and return the string from the function which is same as calling resolve() function with the string. To reject a promise, throw an error from an async function.
This is how you should define login function
User.prototype.login = async function() {
this.cleanup();
try {
const attemptedUser = await usersCollection.findOne({username: this.data.username});
if (attemptedUser && attemptedUser.password == this.data.password) {
return "logged in";
}
throw new Error("invalid something");
} catch (error) {
console.log("Please, try again later");
throw error;
}
};
Related
We have this function in our code that is used to log in a user
const userLogin = loginData => {
return new Promise(async (resolve, reject) => {
try {
const res = await auth.post("/login", loginData);
resolve(res);
} catch (error) {
reject(error);
}
});
};
// Calling function
const loginSubmit = async values => {
try {
const res = await userLogin(values);
console.info(res);
} catch (error) {
console.error("Catch: ", error);
}
};
But from this stackoverflow answer, try-catch blocks are redundant in Promises. I wanted to try and clean this code, so I changed the code above into:
const userLogin = loginData => {
return new Promise(async (resolve, reject) => {
const res = await auth.post("/login", loginData);
if (res.status !== 201) {
reject(new Error("Error"));
}
resolve(res);
});
};
However, when I tried to login with incorrect credentials, the console logs an Uncaught (in promise) Error: Request failed with status code 400
I'm not really familiar with creating my own promises, so I don't know how to do this properly.
Couple of problems in your code:
You are unnecessarily creating a promise; auth.post(..) already returns a promise, so you don't need to create a promise yourself and wrap auth.post(...) inside a promise constructor.
Another problem in your code is that executor function (function passed to the promise constructor) is marked as async; it should not be an async function.
Your function could be re-written as:
const userLogin = async (loginData) => {
const res = await auth.post("/login", loginData);
if (res.status !== 201) {
throw new Error("Error"));
}
return res;
};
You could also re-write your function as:
const userLogin = async (loginData) => {
return auth.post("/login", loginData);
};
Don't forget to use the catch in the code that calls this function.
You might want to read the following article to understand whether you need the try-catch block: await vs return vs return await
I think that in your case since you call to async function inside the constructor of the promise you need to use try catch.
The answer you referred is correct as long as the error happened while you are in the constructor (i.e. the Promise object is in the making), however in your case the rejection of the auth function happens long after the Promise was constructed and therefore it is not rejecting it.
BTW - You don't have to await in the promise. You may do the following:
const userLogin = loginData => {
return new Promise(async (resolve, reject) => {
const prom = auth.post("/login", loginData)
.then((res) => {
if (res.status !== 201) {
reject(new Error("Error"));
}
resolve(res);
});
resolve(prom);
});
};
Since you resolve the async auth call, any rejection by the auth call will be reflect as a rejection from you function
When using a simple callback such as in the example below:
test() {
api.on( 'someEvent', function( response ) {
return response;
});
}
How can the function be changed to use async / await? Specifically, assuming 'someEvent' is guaranteed to be called once and only once, I'd like the function test to be an async function which does not return until the callback is executed such as:
async test() {
return await api.on( 'someEvent' );
}
async/await is not magic. An async function is a function that can unwrap Promises for you, so you'll need api.on() to return a Promise for that to work. Something like this:
function apiOn(event) {
return new Promise(resolve => {
api.on(event, response => resolve(response));
});
}
Then
async function test() {
return await apiOn( 'someEvent' ); // await is actually optional here
// you'd return a Promise either way.
}
But that's a lie too, because async functions also return Promises themselves, so you aren't going to actually get the value out of test(), but rather, a Promise for a value, which you can use like so:
async function whatever() {
// snip
const response = await test();
// use response here
// snip
}
It's annoying that there isn't a straightforward solution, and wrapping return new Promise(...) is fugly, but I have found an ok work-around using util.promisify (actually it also kinda does the same wrapping, just looks nicer).
function voidFunction(someArgs, callback) {
api.onActionwhichTakesTime(someMoreArgs, (response_we_need) => {
callback(null, response_we_need);
});
}
The above function does not return anything, yet. We can make it return a Promise of the response passed in callback by doing:
const util = require('util');
const asyncFunction = util.promisify(voidFunction);
Now we can actually await the callback.
async function test() {
return await asyncFunction(args);
}
Some rules when using util.promisify
The callback must be the last argument of the function that is gonna be promisify
The supposed-callback must be in the form (err, res) => {...}
Funny thing is we do not need to ever specifically write what's the callback actually is.
async/await is magic. You can create a function asPromise to handle this kind of situations:
function asPromise(context, callbackFunction, ...args) {
return new Promise((resolve, reject) => {
args.push((err, data) => {
if (err) {
reject(err);
} else {
resolve(data);
}
});
if (context) {
callbackFunction.call(context, ...args);
} else {
callbackFunction(...args);
}
});
}
and then use it when you want:
async test() {
return await this.asPromise(this, api.on, 'someEvent');
}
the number of args is variable.
You can achieve this without callbacks , use promise async await instead of callbacks here how I would do this. And also here I have illustrated two methods to handle errors
clickMe = async (value) => {
// begin to wait till the message gets here;
let {message, error} = await getMessage(value);
// if error is not null
if(error)
return console.log('error occured ' + error);
return console.log('message ' + message);
}
getMessage = (value) => {
//returning a promise
return new Promise((resolve, reject) => {
setTimeout(() => {
// if passed value is 1 then it is a success
if(value == 1){
resolve({message: "**success**", error: null});
}else if (value == 2){
resolve({message: null, error: "**error**"});
}
}, 1000);
});
}
clickWithTryCatch = async (value) => {
try{
//since promise reject in getMessage2
let message = await getMessage2(value);
console.log('message is ' + message);
}catch(e){
//catching rejects from the promise
console.log('error captured ' + e);
}
}
getMessage2 = (value) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if(value == 1)
resolve('**success**');
else if(value == 2)
reject('**error**');
}, 1000);
});
}
<input type='button' value='click to trigger for a value' onclick='clickMe(1)' />
<br/>
<input type='button' value='click to trigger an error' onclick='clickMe(2)' />
<br/>
<input type='button' value='handling errors with try catch' onclick='clickWithTryCatch(1)'/>
<br/>
<input type='button' value='handling errors with try catch' onclick='clickWithTryCatch(2)'/>
const getprice = async () => {
return await new Promise((resolve, reject) => {
binance.prices('NEOUSDT', (error, ticker) => {
if (error) {
reject(error)
} else {
resolve(ticker);
}
});
})}
router.get('/binanceapi/price', async function (req, res, next) {
res.send(await binanceAPI.getprice());});
I'm fairly new to JS development and I've recently discovered the concept of DRY (Don't Repeat Yourself), which has helped me clean up my code a lot.
I have the following type of issue in a few places throughout my project and I'm struggling to think of a way to improve it whilst maintaining the principles of readability and of not repeating code.
if (something) {
doPromise().then(() => {
doSomething()
}).catch(e => {
doThisInstead()
})
} else {
doThisInstead()
}
The crux of it is that I need to execute doThisInstead() or whatever function / in-line code is there whenever either the if statement goes to the else block, or when the promise goes to the catch block, and in this particular instance, I have no way of knowing that the promise will go to the catch block before it is attempted.
Writing code like this can quickly become messy, so I'd appreciate any tips. Many thanks!
You might be looking for if-else flow in promise (bluebird), just with catch instead of then:
(something
? doPromise().then(() => {
doSomething()
})
: Promise.reject()
).catch(e => {
doThisInstead()
})
Written with async/await, it would be
try {
if (!something)
throw new Error("something is wrong")
await doPromise();
await doSomething();
} catch(e) {
await doThisInstead();
}
An alternative that does not rely as much on exceptions would be
if (!something || await doPromise().then(doSomething).then(() => false, () => true)) {
doThisInstead();
}
If you use the _async / await _ syntax, you can await doPromise(), then run doThisInstead() if either something is falsey or an error occurred, this means only one call to doThisInstead() in your code.
This example will cause doPromise() to fail 50% of the time.
let something = true;
// Fail 50% of the time
function doPromise() {
return new Promise((resolve, reject) => setTimeout(Math.random() <= 0.5 ? resolve: () => reject(new Error("Some error")), 100));
}
function doSomething() {
console.log("doSomething()");
}
function doThisInstead() {
console.log("doThisInstead()");
}
async function test() {
errorOccurred = false;
if (something) {
try {
await doPromise();
doSomething();
} catch (e) {
errorOccurred = true;
}
console.log("doPromise: " + (errorOccurred ? "error occurred." : "ran successfully"));
}
// Run doThisInstead() if either an error occurred or something is falsey
if (!something || errorOccurred) {
doThisInstead();
}
}
test()
This can be solved with a Promise, using the following code:
function hypotheticalFunction() {
const doSomething = () => {
// stuff
}
const doThisInstead = () => {
// stuff
}
const doSomethingHandler = () => {
return new Promise((resolve,reject) => {
if (something) {
doPromise().then(() => {
doSomething();
resolve();
}).catch(() => {
reject();
})
} else {
reject();
}
})
}
doSomethingHandler().catch(doThisInstead);
}
hypotheticalFunction();
login() {
return new Promise((resolve, reject) => {
userCollection.findOne({email: this.data.email}).then((myUser)=>{
if (myUser && myUser.password == this.data.password) {
resolve("Congrats! Successfully logged in");
} else{
reject("Login failed");
}
}).catch(()=>{
reject("Please try again later")
})
})
}
This is my model and I can use it to find data from Mongodb. I'm using express js. But, I want to know how I can use async await to do exactly the same thing that the above promise does. I mean, I would like to convert this code to async await way.
Any assistance would be highly appreciated.
This should suffice:
async function login() {
try {
const user = await userCollection.findOne({ email: this.data.email });
if (user && user.password === this.data.password) {
// handle valid user
}
else {
// handle not found user or password mismatch
}
}
catch (error) {
// handle or rethrow error
}
}
Duplicating your case will result in:
async function login() {
try {
const user = await userCollection.findOne({ email: this.data.email });
if (user && user.password === this.data.password) {
return 'Congrats! Successfully logged in';
}
else {
throw new Error('Login failed');
}
}
catch (error) {
throw new Error('Please try again later');
}
}
Then in your caller code you can await(or .then() it, but prefer await) the result of login:
try {
const loginResult = await login();
}
catch(error) {
// handle error
}
Note that in doing so, you will once again need to mark the caller function as async for you to be able to use the await operator.
I have the following function, which I want to re-use as an "action" template and pass another function as a parameter, which will be the action function, to be executed in the middle of it.
QUESTION
Is it possible? How can I do it?
Note that the "action" is asynchronous and also I'm using React.
function templateAction(action) {
try {
setLoading(true);
setError(null);
// DO SOMETHING
action();
setLoading(false);
}
catch(err) {
console.log(err);
setError(err);
setLoading(false);
}
}
And inside that action() call should execute the following function:
async function getBlogPost() {
const querySnapshot = await firebase.firestore().collection('blog').where('slug','==',props.match.params.slug).get();
console.log(querySnapshot.docs);
if (querySnapshot.docs.length === 0) {
throw 'ERROR: BlogPost not found...';
} else if (querySnapshot.docs.length > 1) {
throw 'ERROR: More than 1 blogPost found...';
}
const blogPostData = querySnapshot.docs[0].data();
setFirestoreID(querySnapshot.docs[0].id);
setBlogPost(blogPostData);
}
SNIPPET
I think that I've built the behavior that I need (run snippet). Can I do it simpler than that? It seems a lot of boilerplate.
async function templateAction(action) {
try {
console.log('Template Action BEFORE calling action');
await action();
console.log('Template Action AFTER calling action');
}
catch(err) {
console.log(err);
}
}
function action() {
return new Promise(async (resolve,reject) => {
console.log('I am sync from action function BEFORE async call');
await mockAPI();
console.log('I am sync from action function AFTER async call');
resolve();
});
}
function mockAPI() {
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('I am from async mockAPI call');
resolve();
},1500);
});
}
templateAction(action);
You can pass by anonymous function like this: https://codesandbox.io/embed/awesome-mayer-52ix7
function templateAction(action) {
action();
}
let test = function() {
alert("test");
};
templateAction(test);
For the async part, maybe you will need to make promise, depending if you need a confirmation for the action.
With reactJS you can make this more simple by using scope sending properties and getting using "this.props"
Here is my final code, with error catching using try catch blocks.
It works, though I think it hurts readability.
async function templateAction(action) {
try {
console.log('Template Action BEFORE calling action');
await action();
console.log('Template Action AFTER calling action');
}
catch(err) {
console.log('I was caught and logged');
console.log(err);
}
}
function action() {
return new Promise(async (resolve,reject) => {
try {
console.log('I am sync from action function BEFORE async call');
await mockAPI();
console.log('I am sync from action function AFTER async call');
resolve();
}
catch(err) {
console.log('I was caught');
reject(err);
}
});
}
function mockAPI() {
return new Promise((resolve,reject) => {
setTimeout(() => {
console.log('I am from async mockAPI call');
resolve();
},1500);
});
}
templateAction(action);