JavaScript async await
Nowadays, we are using async await in ES2017 or ES8 and node js ≥ 8.x.
If you wish to know about ECMAScript, its relationship with JavaScript and its version details, etc…, please refer the following links.
Why we need promise then in JavaScript
By default, JavaScript or node js is a non blocking i/o and asynchronous.
To know about the core architecture of JavaScript or node js, please read the following blog.
As per core architecture of JavaScript or node js, it uses event loop for processing in the background as a single threaded language.
Suppose if we call an api and need to get the results. Based on the results only if we can do the further functionalities, we need promise then.
For example, let us take the following code snippet to explain about promise then using fetch api in core javascript.
callApi() {
return new Promise( (resolve,reject) => {
this.$http.get( “<api_url>” ).then( (response ) => {
resolve(response)
}).catch(error=>{
reject(error)
})
})
}
processData(data) {
//logics goes here…
}
submit() {
callApi().then(response => {
let data = response.data
processData( data )
}).catch( error => {
console.log(error)
})
}
submit()
Purpose of async await
In the above code snippet, i used axios npm to make http calls in vue js. The above example uses promise then. But, every time we need promise and then for making api calls or long running process like interacting with database in node js. If we use lot of promise then, then the logics will be always within then block or even in second level then block.
Block based coding using promise then make difficulty to understand the logics behind the api calls and difficulty to maintain.
To avoid block based coding complications, async await comes in.
How to use async await
Async keyword should be used in front of the function name in which api call will be made. And, in front of the function of api calls, we need to mention await keyword to wait for the result.
For example let us take the previous example in async await instead of promise then.
callApi() {
return new Promise( (resolve,reject) => {
this.$http.get( “<api_url>” ).then( (response ) => {
resolve(response)
}).catch(error=>{
reject(error)
})
})
}
processData(data) {
//logics goes here…
}
async submit() {
try {
let response = await callApi()
let data = response.data
processData( data )
} catch( error ) {
}
}
Get Velmurugan Nagarajan’s stories in your inbox
Join Medium for free to get updates from this writer.
submit()
Polyfill for async await
If a browser or node js version doesn’t support async await, we can use any of the following polyfill libraries.
In both node js < 8.x and ES < 8, we used promise then. As i already mentioned, if we need to use async await in node js < 8.x and ES < 8 supported browsers, we need any one of the above three polyfill libraries.
When we can use async await
For the following scenarios, we can use async await.
- Whenever we are in the situation to process the data which comes from api response, we can use async await.
- Whenever the api server makes a database interaction, we can use async await.
When we don’t use async await
- If we don’t need the response of an api for the next line of api call, we don’t need to use async await.
- If we need the response of first api call to second api call, we can use async await.
- If we make 3 api calls and we don’t need the responses from those three for the next line of api calls, we don’t need to use async await.
- If we make 3 api calls and we need to call a function after 3 api calls done, we don’t need to use async await. Instead, we can use Promise.all().
Promise.all() example
callApi( api_url ) {
return new Promise( (resolve,reject) => {
this.$http.get( api_url ).then( (response ) => {
resolve(response)
}).catch(error=>{
reject(error)
})
})
}
processData(data) {
//logics goes here…
}
async submit() {
try {
let promise1 = callApi( “<api_url1>” )
let promise2 = callApi( “<api_url2>”” )
let promise3 = callApi( “<api_url3>”” )
let responses = await promise.all([promise1, promise2, promise3])
let ids = []
for(let i=0;i<responses.length;i++) {
ids.push(responses[i].data.id)
}
processData( ids )
} catch( error ) {
}
}
submit()
Conclusion
So far, in this blog, we have seen about promise then, async await, es version history, javascript/node js core architecture, etc…
Please use async await carefully. Please understand the concept of async await by reading this blog and contents of external links.
Before you use async await, please read “When we don’t use async await” and “Promise.all() example sections of this blog.
If you have any queries, please feel free to send me your douts, queries, suggestions to anunsk1984@gmail.com.
Thank you.
