DEV Community

Cover image for JavaScript Promises: The Scrolls of Asynchronous Magic
Chandan Singh
Chandan Singh

Posted on

JavaScript Promises: The Scrolls of Asynchronous Magic

Welcome back, young sorcerers! So far, we've explored the realms of variables, control structures, functions, objects, and arrays. Today, we venture into an area that even seasoned wizards often find daunting—Promises in JavaScript!

Introduction

In the realm of programming, just like in any quest, sometimes you must wait for the right moment to strike. Promises offer a way to manage these waiting periods. Think of Promises as magic scrolls that contain the outcome of a future event.

Origin of Promises

Promises have a storied past, emerging from the chaos that was "callback hell." Before Promises, mages and coders alike would nest magical spells (callbacks) within each other until their complexity spiraled out of control—aptly named "Pyramid of Doom." Promises came as a cleaner, more organized way to manage asynchronous tasks.

Crafting a Promise

In the arcane language of JavaScript, crafting a Promise looks like this:

javascriptCopy code
let magicalEvent = new Promise((resolve, reject) => {
  // Your magic code here
});

Enter fullscreen mode Exit fullscreen mode
  • resolve: What happens when the spell succeeds.
  • reject: What happens if the spell fails.

Basic Examples

Resolving a Promise

javascriptCopy code
let findTreasure = new Promise((resolve, reject) => {
  // After 3 seconds, we find a treasure
  setTimeout(() => {
    resolve('Treasure found!');
  }, 3000);
});

findTreasure.then(message => {
  console.log(message); // outputs: 'Treasure found!'
});

Enter fullscreen mode Exit fullscreen mode

Rejecting a Promise

javascriptCopy code
let findTreasure = new Promise((resolve, reject) => {
  // After 3 seconds, the quest fails
  setTimeout(() => {
    reject('Quest failed!');
  }, 3000);
});

findTreasure.catch(reason => {
  console.log(reason); // outputs: 'Quest failed!'
});

Enter fullscreen mode Exit fullscreen mode

Further Reading

For those brave souls eager to venture deeper into the magical world of Promises, the MDN Documentation on Promises offers more advanced incantations and spells.

Sorcerer’s Assignments: Test Your Magic

  1. Create a Promise that simulates fetching data from a magical oracle. Make it resolve successfully.
  2. Create another Promise but this time make it fail. Capture the failure using .catch().
  3. Combine your knowledge of functions and Promises to create an async spell (function) that utilizes Promises.

Remember, your previous journey with objects still holds value. Try creating a Promise around an object operation and share your incantations (code) in the comments below!

Conclusion

Promises may seem complex at first, but they are invaluable scrolls in your JavaScript spellbook. Mastery over Promises can make your journey in both magical realms and real-world projects much smoother. So practice these spells and until next time, may your code run error-free!

Top comments (0)