async/await in javascript
Furkan is a software engineer and frontend developer, whose main purpose is to create best optimal experience for user but also keeping the application or project as performant as possible.
He is deeply interested on web technologies and he is building new projects in this subject. He is especially familiar with React, Vue, Node and Java. You can check out what he built on his GitHub account. There is potential ways to connect with him at the end of this summary 👇
Things he like to do; ✔ Trying to solve other people's struggles ✔ Teaching or telling some subject he know to friends or colleagues ✔ Building different kinds of projects ✔ Meeting & talking with new people ✔ Listening podcasts ✔ Playing Chess ✔ Watching drama | sci-fi movies ✔ Listening music while I travelling or trying to fix problems ✔ Researching next generation technologies like cyptocurrency, IoT, smart devices
If you want to reach out with him, here is how you can do it;
🔼 Blog: https://blog.furkanozbek.com/ 🔼 GitHub: https://github.com/afozbek 🔼 Mail: abdullah.furkan.ozbek@gmail.com 🔼 Twitter: https://twitter.com/afozbek_ 🔼 Instagram: https://instagram.com/furkan.codes/
Thanks for reading ✨
1. async keyword
async is a keyword which can be used before of a function definition.
async function sayHi() {
return "Hello There"
}
The word async means one thing: the function that uses it always returns a promise. Other values other then promises are wrapped as promise and resolved by default.
For example in previous example, it will return a promises with returned string. Lets look at it
async function sayHi() {
return "Hello There!"
}
function log(message) {
console.log(message)
}
sayHi().then(log) // console > "Hello There"
We could also explicitly return a promise, which works the same way
async function sayHi() {
return Promise.resolve("Hello There!")
}
sayHi().then(log) // console > "Hello There"
2. await keyword
Right now we see how async function works behind the scenes. But there is another keyword which can only be used inside async functions and that is await
// syntax
async function sayHi() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => { resolve("Hello There!") }, 3000)
})
// wait until promise is resolved
let result = await promise
log(result) // console > "Hello There"
}
If we try to use await in a non-async function, there would be a syntax error
3. error-handling on async functions
Because async functions returns promise, if there was a rejection during function process it throws an error just like throw statement.
async function logError() {
return Promise.reject(new Error("Whoops!"))
}
async function logError() {
throw new Error("Whoops!")
}
3.1. using try/catch
We can use try/catch statement to handle potential problems in the codebase.
async function logError() {
return Promise.reject(new Error("Whoops!"))
}
async function sayHi() {
try {
await logError()
} catch (error) {
// catches the error
// console -> Whoops!
console.log(error.message)
}
}
4. async/await and .then/catch
When we use async/await, we rarely need .then, because await handles the waiting for us. And we can use a regular try..catch instead of .catch. That’s usually (but not always) more convenient.
5. Resources
https://javascript.info/async-await
