Tags: javascript
Getting started with Javascript Promises and Async Await.
Lets's say you have the following code which executes sequentially
This code executes sequentially. But what if you need to perform an operation that depends on data from a server or an API?
A Promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
Consider the following example where we make an API request using the axios library:
This code will fail because the data property does not exist at the time of the console.log() statement. The axios.get() method returns a Promise, which is an asynchronous operation.
The beauty of Promises is in their methods: .then() and .catch(). The .then() method is used for handling successful responses, while .catch() is used for handling errors.
Async/Await is syntactic sugar over Promises, making asynchronous code easier to write and read. An async function returns a Promise, and the await keyword is used to wait for a Promise to resolve or reject.
This code is more readable and looks synchronous, even though it’s handling asynchronous operations.
Async functions are different from regular JavaScript functions in the sense that they can contain await expressions, allowing the function to pause and wait for the Promise to resolve or reject, before resuming execution and returning the resolved value. You don't have to use await inside an async function, but it's the primary reason for declaring a function as async.
Callback Hell typically occurs when you have several nested callbacks, creating a complex and hard-to-read code structure. This often happens when dealing with multiple asynchronous operations that need to be performed in sequence.
Promises provide a cleaner way to handle asynchronous operations. Let’s refactor the above example using Promises:
Async/Await further simplifies asynchronous code, making it even more readable: