Understanding JavaScript Promises (for real)

  

If you’ve always felt confused by articles about Promises, this is the one for you. We’ll break down what they are, why they exist, and how to use them — clearly. Most importantly, you’ll finally understand the connection between Promise, async and await.

🔗 Do you like Techelopment? Check out the website for all the details!

✅ 1. What is a Promise?

A Promise is a JavaScript object that represents an asynchronous operation that may complete in the future.

In simple terms: it’s a promise that your code makes, saying:
“I haven’t finished yet, but I promise I’ll give you the result (or the error) later.”

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("All good!");
  }, 1000);
});

promise.then(result => {
  console.log(result); // After 1 second: "All good!"
});

❓ Why use Promises?

Before Promises, we used callbacks:

function doSomething(callback) {
  setTimeout(() => {
    callback("Done!");
  }, 1000);
}

doSomething(result => {
  console.log(result); // "Done!"
});

The problem? When you have many nested async operations, you end up in the infamous “callback hell”:

login(user => {
  getData(user.id, data => {
    render(data, () => {
      console.log("Everything is ready!");
    });
  });
});

🔄 How to use a Promise

When you call a function that returns a Promise, you can use:

• .then() to handle success
• .catch() to handle errors

loginUser()
  .then(user => loadData(user.id))
  .then(data => renderPage(data))
  .catch(error => console.error("Something went wrong", error));

⚡️ Async and Await: the "human" version of Promises

What is async/await? And how is it related to Promises?

async/await is just a simpler way to write code that uses Promises.

Example:

async function showAll() {
  try {
    const user = await loginUser();
    const data = await loadData(user.id);
    renderPage(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

It’s exactly the same logic as above, but written in a more readable, "synchronous" style.

🧠 Summary:

Concept	What it does
Callback	A function you call when an async task is done
Promise	An object representing something that may complete in the future
then / catch	Methods to react to the Promise result or error
async / await	A cleaner syntax to work with Promises

🎯 Full example: From Callback to Async/Await

Using callback:

getUser((user) => {
  getPosts(user.id, (posts) => {
    console.log(posts);
  });
});

Using Promises:

getUser()
  .then(user => getPosts(user.id))
  .then(posts => console.log(posts))
  .catch(err => console.error(err));

Using async/await:

async function showPosts() {
  try {
    const user = await getUser();
    const posts = await getPosts(user.id);
    console.log(posts);
  } catch (err) {
    console.error(err);
  }
}

🌐 Real-world example using fetch and an API

Let’s say you want to fetch posts from an API like: https://jsonplaceholder.typicode.com/posts

With Promises:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(data => {
    console.log("Posts received:", data);
  })
  .catch(error => {
    console.error("Fetch error:", error);
  });

With async/await:

async function loadPosts() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    console.log("Posts received:", data);
  } catch (error) {
    console.error("Fetch error:", error);
  }
}

Anyone can try this right in the browser console (press F12 and paste the code).

📌 Conclusion

• Promises are key to handling asynchronous JavaScript.
• async/await is just a cleaner way to write them.
• If you understand Promises, you understand the whole async flow in JS.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment