Promises: Values That Arrive Later

Promises: Values That Arrive Later

Some work on a web page takes time — downloading data from a server, for example. JavaScript does not stop and wait. Instead, it uses a promise, which is an object that acts as a placeholder for a value that will arrive later.

Think of it like a ticket at a restaurant. You order food and get a ticket. The food is not ready yet, but the ticket guarantees that something will come — or that something will go wrong. In JavaScript terms, a promise is either pending (still working), fulfilled (the value arrived), or rejected (something failed).

Creating and Using a Promise

You rarely create promises yourself at first — browser functions like fetch (which downloads data) return them. You get the value using the .then() method, which runs a function when the promise fulfills, and .catch(), which runs when it rejects.

const promise = fetch('https://api.example.com/data');

promise
  .then(response => {
    console.log('The data arrived!', response.status);
  })
  .catch(error => {
    console.log('Something went wrong:', error.message);
  });

Notice the code reads top to bottom, even though the value arrives later. The .then() part is like saying: "When the food is ready, do this."

Chaining: Work in Order

A promise's .then() returns a new promise, so you can chain steps that run one after another. This is how you do several things in sequence with slow operations.

function wait(milliseconds) {
  return new Promise(resolve => {
    setTimeout(() => resolve('done waiting'), milliseconds);
  });
}

wait(1000)
  .then(message => {
    console.log(message); // after 1 second: "done waiting"
    return wait(500);     // return another promise
  })
  .then(message => {
    console.log(message); // 0.5 seconds later
  });

Here, wait returns a promise. The second .then() only runs after the first promise fulfills — the chain keeps things in order.

Why Not Just Wait?

If JavaScript stopped and waited for each download, the page would freeze. Buttons would not respond, animations would stop. Promises let the browser keep running other work while the slow task finishes in the background.

Common Mistakes

• Forgetting .catch(). If a promise rejects and nothing handles the error, the failure is silent and hard to debug.
• Trying to use the value directly: console.log(fetch(url)) logs a promise object, not the data.
• Forgetting to return inside a .then() when you want the next step to wait.