Promises — Waiting for Things

Understand how JavaScript handles operations that take time using Promises — the foundation of all data fetching.

Step 1 of 7

Why We Need Promises

JavaScript runs code one line at a time, top to bottom. But what happens when you need to do something that takes time — like fetching data from a server? The server might take 200 milliseconds or 3 seconds to respond. Should JavaScript just freeze and wait? Absolutely not — that would make the entire page unresponsive. No scrolling, no clicking, nothing.

Instead, JavaScript uses an asynchronous model. When you start a time-consuming operation (like a network request), JavaScript doesn't wait around. It says, "I'll start this, and when it's done, call me back." Then it continues running the rest of your code. This is why you can scroll a webpage while images are still loading.

A Promise is JavaScript's way of representing a value that doesn't exist yet but will (or won't) in the future. It's literally a promise: "I promise I'll give you the data when the server responds." The fetch() API returns a Promise, which is why understanding Promises is essential before we start fetching data.

Think of it this way: Ordering food at a restaurant is a perfect analogy. You give your order to the waiter (start the async operation). The waiter gives you a ticket number (a Promise). You don't stand at the counter waiting — you go sit down, chat with friends, check your phone (other code runs). When your food is ready, they call your number (the Promise resolves). If the kitchen is out of an ingredient, they come tell you there's a problem (the Promise rejects).

Learn more on MDN

Promise Using Promises