Understanding Promises vs Async/Await

Understanding Promises vs Async/Await

Hello! Welcome to another coding tutorial at [sagarkunwar.com.np](http://sagarkunwar.com.np). Today, we’ll unravel one of the most important concepts in modern JavaScript — promises and async/await. If you’re making your first steps in asynchronous programming, this guide is tailored just for you. I’ll be your mentor on this journey to help you understand these concepts better.

The Need for Asynchronous Programming

When we work with JavaScript, our code often needs to interact with external systems like servers, databases, or APIs. Imagine making a cup of coffee. You could watch the kettle boil, right? Or, you could start some other task while the water’s heating up. Asynchronous programming is kind of like the latter; it lets us keep our code running while we wait on long-running operations.

JavaScript originally used callbacks to handle such tasks, but as applications became more complex, callbacks became unwieldy (cue the dreaded “callback hell”). That’s where promises and async/await enter, making asynchronous code more manageable and readable.

What Are Promises?

A promise is an object representing the eventual completion or failure of an asynchronous operation. Think of it as a “promise” that you’ll get a result in the future (hence the name).

Key States of a Promise:

• Pending: The initial state, neither fulfilled nor rejected.
• Fulfilled: The operation completed successfully.
• Rejected: The operation failed.

How to Use Promises

Here’s a simple example:

let myFirstPromise = new Promise((resolve, reject) => {
setTimeout(() => {
let success = true;
if (success) {
resolve("Operation was successful!");
} else {
reject("Operation failed.");
}
}, 2000);
});
myFirstPromise.then((message) => {
console.log(message);
}).catch((error) => {
console.error(error);
});

• We create a new promise with new Promise().
• Inside the promise, we have two functions: resolve and reject.
• Use .then() to handle success, and .catch() for any errors.

In the example above, after 2 seconds, if success is true, the promise is fulfilled, and the then block runs. Otherwise, the catch block handles any errors.

Diving Into Async/Await

Async/await is a newer syntax that builds on promises, making asynchronous code look and behave a little more like synchronous code. This leads to more readable and maintainable code.

Using Async/Await

To use async/await, you start by declaring a function with the async keyword:

async function fetchData() {
try {
let message = await myFirstPromise;
console.log(message);
} catch (error) {
console.error(error);
}
}
fetchData();

How it Works:

• Async Function: Declaring a function as async means it will return a promise.
• Await Keyword: Pauses the execution of the async function, waiting for the promise to resolve. The execution resumes when the promise settles (fulfilled or rejected).
• Error Handling: Use try/catch blocks to manage errors elegantly.

Visual Comparison

Think of using promises as writing a list of instructions: “Do this, then do that, and if there’s an error, do this instead.”

Async/await allows you to write instructions more like a story: “Now, let’s do this… Once that’s done, we’ll move on to this… If something goes wrong, handle it like this.”

When to Use What?

• Promises: They are versatile and work perfectly when chaining multiple asynchronous operations. They’re already widely adopted in many libraries.
• Async/Await: They shine when you need cleaner, more readable code. Especially useful when you have several promises to handle in a logical order.

Conclusion: The Best of Both Worlds

Both promises and async/await are valid, effective tools in asynchronous programming. They aren’t mutually exclusive, and understanding both will make you a more versatile developer.

Practice Ideas

1. API Requests: Use fetch API with promises and then refactor your code using async/await.

2. Error Handling: Experiment by forcing errors in multiple scenarios to improve your handling mechanisms.

Remember, practice makes perfect. With time and experience, promises and async/await will become second nature. Keep coding and having fun with JavaScript!

—

If you’re hungry for more knowledge, stay tuned to [sagarkunwar.com.np](http://sagarkunwar.com.np). Happy coding!