JavaScript Promises: Handling Future Values

Why it exists

JavaScript is single-threaded, meaning it can only do one thing at a time. If a long-running operation like a network request blocked the main thread, the entire user interface would freeze. Promises were created to manage these asynchronous operations gracefully, allowing other code to run while waiting for the operation to complete.

The mental model

A Promise is a placeholder for a future value. Imagine ordering a coffee: you get a receipt (the Promise) immediately. You can't drink the receipt, but it guarantees you'll eventually get either your coffee (a fulfilled value) or a notice that they're out of beans (a rejected reason). The receipt lets you go sit down and do other things instead of staring at the barista.

How it works

A Promise starts in a pending state. It can transition to one of two settled states. First, fulfilled, meaning the operation succeeded, and the promise now holds a value. Second, rejected, meaning the operation failed, and the promise holds a reason (an error). You attach handlers to a promise using the .then() method for success and the .catch() method for failure. For example, myPromise.then(value => { ... }).catch(error => { ... }). These handlers will execute whenever the promise settles, even if it has already settled before you attach them.

When to use it

Use Promises whenever you perform an operation that doesn't complete instantly. This is standard for all modern web APIs that involve I/O, such as using the fetch() API to get data from a server, reading a file from disk in Node.js, or waiting for a timer to finish. They are the foundation for the more modern async/await syntax, which is just syntactic sugar over Promises.

When not to use it

Do not wrap synchronous code in a Promise. If an operation is instantaneous and doesn't involve waiting (like a simple math calculation or accessing an object's property), creating a promise adds unnecessary complexity. Promises are specifically for managing the delay and outcome of asynchronous actions.

One canonical example

A common use case is fetching data. The fetch function returns a promise that resolves with the server's response.

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fetch failed:', error));

This code requests data, then uses a .then() block to parse the response as JSON (which is also async), then a second .then() to log the final data, and a .catch() to handle any network or parsing errors.