Javascript async/await
JavaScript is a synchronous in nature, what this simply means is that code runs line by line from right to left, one after the other. But there are sometimes we want different behavior in our code. One of the ways we can make this happen is using async/ await.
In this article, i would be talking about the granularities of async/await and the underlying processes and how we can use it manipulate how our code runs.
If you’ve used promises before you would understand me when i say async/await is just a syntactic sugar we can used to resolve promises, its used to write better promises and makes code more readable. Just like my colleague would say, it adds more swag to your promises. Lol
Async
Async is actually just a keyword which when added in front of our function makes it asynchronous. Now on a low level it tells javascript that this function will return a promise that would either be rejected or resolved. It converts a function into a promise. While this may seam like a weird way to describe it, i would simply explain what i mean.
if you run the following code in your browser
function greet() {
return ‘hi’
}
greet()//Prints ‘hi’
But then if you run the same exact code with async keyword in front it would automatically return promise.
async function greet() {
return ‘hi’
}
//Prints promise{<fulfilled>: ‘hi’}async function greet() {return ‘hi’
}
//Prints promise{<fulfilled>: ‘hi’}
So do you now get why i said it converts a function result into a promise?
You can also write it with the ES6 arrow function like
const greet = async () => {
return ‘hi’
}
//Prints promise{<fulfilled>:’hi’}
Await
An Async function is incomplete without the await keyword. The await keyword can only be used inside an async function. What await actually does is that it basically pauses your code until something is returned. The reason i explained it this way is because like i said earlier JavaScript runs one after the other and so with the asyn keyword somethings has to be returned before javascript runs the next line. This could useful if the next line of code is dependent on it to function.
Now lets make a http request using axios without the asyn/await
const getAllUsers = () => {
axios.get(url)
.then((res) => console.log(res))
.catch((err) => console.log(err)
)}
Now lets make the same http request using async/await
const getAllUsers = async() => { return await axios.get(url) }
We could do the same thing within a try catch finally block like this
const getAllUsers = async () => {
try {
const resp = await axios.get(url)
If(resp) {
console.log(res.data)
}
} catch (err){console.error(err)
} finally {
return true
}
},
getAllUsers()
At this point, you would get the same result when you use the axios library to make a request.
In conclusion async await is a just a nicer and a more readable way of writing promises. Async functions are incomplete without an await. Since async await came in with the javascript ES8 it makes your code look modern.
