JavaScript Promises and Async/Await

Photo by Growtika on Unsplash

JavaScript Promises and Async/Await: Simplifying Asynchronous Programming

Hey there!

You ever wonder about this? if you've been tinkering with javascript for a bit, you've probably stumbled upon scenarios where you need to deal with asynchronous operations, like fetching data from a server or reading files. You ever wonder about this? it can get a bit tricky, right?

You ever wonder about this? well, that's what we're tackling today: understanding promises and the magic of async/await in javascript!

what’s a promise?

think of a promise as a placeholder for a value that isn't known when the promise is created.

It represents a future value. In simpler terms, it’s like ordering a coffee at your favorite café. When you place your order, you get a receipt (the Promise), which doesn't immediately have the coffee but guarantees you'll eventually get it, or you'll find out there was an issue (the coffee machine broke down).

Promises can be in one of three states:

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

Once a promise is kinda fulfilled or rejected, it is kinda settled and won’t change states again.

You ever wonder about this? this behavior prevents strange bugs and ensures that the values are predictable when dealing with asynchronous code.

creating and using promises

to create a promise, you use the new promise() constructor which takes a function that has two parameters: resolve and reject. These are methods used to determine the outcome of the promise.

You ever wonder about this? let's see a basic example:

Source: based on community trends from Reddit and YouTube

Copyable Code Example

const myCoffeeOrder = new Promise((resolve, reject) => {
  // Let's assume it takes 3 seconds to make a coffee
  setTimeout(() => {
    const coffeeReady = true; // simplifying, no actual coffee logic here!
    if (coffeeReady) {
      resolve('Here is your coffee ☕');
    } else {
      reject('Sorry, the coffee machine is broken. ☹');
    }
  }, 3000);
});

myCoffeeOrder.then((coffee) => {
  console.log(coffee); // Output: Here is your coffee ☕
}).catch((error) => {
  console.error(error); // Output: Sorry, the coffee machine is broken. ☹
});


In this scenario, resolve() is called if everything goes well, and reject() is used if something goes wrong. The .then() method is used to handle a fulfilled promise, while .catch() is for handling rejections.

Simplifying Further with Async/Await

Async/Await, introduced in ES2017, further simplifies working with asynchronous code, making it look and behave a bit more like synchronous code. This is super helpful because it makes your code cleaner and easier to understand.

Here’s how you can use Async/Await with the Promise we created:


async function getOrder() {
  try {
    const coffee = await myCoffeeOrder;
    console.log(coffee);  // Output: Here is your coffee ☕
  } catch (error) {
    console.error(error); // Output: Sorry, the coffee machine is broken. ☹
  }
}

getOrder();


In the above function, async before the function definition tells JavaScript that this function will handle promises asynchronously. You can then use await to pause the function in a non-blocking way until the promise settles. If the promise is fulfilled, you get the value and can use it immediately. If it's rejected, the error is thrown and caught in the catch block.

And there you have it! You're now equipped to handle asynchronous operations in your JavaScript code like a pro. Remember, mastering these concepts takes a bit of practice, so don't hesitate to experiment with different scenarios to cement your understanding. Happy coding!