Let's Learn Promises in JavaScript! 🚀

#webdev #javascript #programming #tutorial

Hey there, JavaScript enthusiasts! 👋 Are you ready to dive into Promises and make your async code cleaner and more fun? 🎉 Let’s break it down step-by-step with simple examples, fewer boring theories, and loads of practical code snippets! 💻✨

What’s a Promise? 🤔

A Promise in JavaScript is like a "promise" in real life:

Pending: "I'll do this later."
Fulfilled: "I did it!" 🎉
Rejected: "Oops, something went wrong." 😢

Why Use Promises? 🙋‍♀️

Before Promises, we had callbacks, which often led to callback hell:

getData(function (data) {
  processData(data, function (result) {
    saveData(result, function (response) {
      console.log("All done!");
    });
  });
});

😵 Hard to read, right?

Promises save the day! 🦸‍♂️ They flatten this mess into a chain:

getData()
  .then(processData)
  .then(saveData)
  .then(() => console.log("All done!"))
  .catch((error) => console.error("Something went wrong:", error));

Let's Build a Promise 🌟

Here’s how you create a promise:

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Change this to false to see rejection
  if (success) {
    resolve("Yay! It worked! 🎉");
  } else {
    reject("Oh no! Something went wrong. 😢");
  }
});

Using the promise:

myPromise
  .then((message) => console.log(message))
  .catch((error) => console.error(error));

Real-Life Example: Fetching Data 🛒

Promises are everywhere in JavaScript! A common one is fetch.

Let’s get some user data:

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json()) // Convert response to JSON
  .then((data) => console.log("User data:", data)) // Log the data
  .catch((error) => console.error("Error fetching data:", error)); // Handle errors

Chaining Promises 🔗

You can chain .then for multiple steps:

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((post) => {
    console.log("Post Title:", post.title);
    return fetch(`https://jsonplaceholder.typicode.com/users/${post.userId}`);
  })
  .then((response) => response.json())
  .then((user) => console.log("Author:", user.name))
  .catch((error) => console.error("Something went wrong:", error));

Handling Errors 🛑

The .catch block handles any error in the chain:

fetch("https://jagroopurl.com") // BTW This doesn't exist
  .then((response) => response.json())
  .catch((error) => console.error("Oops, error caught here:", error));

Pro tip: Add a .catch at the end of every chain to avoid unhandled errors. 🚨

Parallel Promises with `Promise.all` 🕒

Run multiple promises in parallel:

const promise1 = fetch("https://jsonplaceholder.typicode.com/posts/1");
const promise2 = fetch("https://jsonplaceholder.typicode.com/posts/2");

Promise.all([promise1, promise2])
  .then((responses) => Promise.all(responses.map((r) => r.json())))
  .then((data) => console.log("Both posts:", data))
  .catch((error) => console.error("One or more promises failed:", error));

A Promise-Based Timer ⏳

Let's create a timer using promises:

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

wait(2000).then(() => console.log("2 seconds later... ⏰"));

Let's Test Your Knowledge! 🧠

Here’s a tricky question for you:

const promise = new Promise((resolve, reject) => {
  console.log("1. Promise created");
  resolve("2. Promise resolved");
});

promise.then((msg) => console.log(msg));

console.log("3. Synchronous log");