JS Promise

[mancuoj]

Introduction

One of the most powerful aspects of JavaScript is how easily it handles asynchronous programming. As a language created for the web, JavaScript need to respond to user interactions such as clicks and key presses from the beginning, and so event handlers such as onclick were created. Event handlers allowed developers to specify a function to execute at some later point in time in reaction to an event.

Node.js further popularized asynchronous programming in JavaScript by using callback functions in addition to events. As more and more programs started using asynchronous programming, events and callbacks were no longer sufficient to support everything developers wanted to do. Promises are the solution to this problem.

Promises are another option for asynchronous programming, and the work like futures and deferred do in other languages. A promise specifies some code to be executed later (as with events and callbacks) and also explicitly indicates whether the code succeeded or failed at its job. You can chain promises together based on success or failure in ways that make your code easier to understand and debug.

[mancuoj]

Promise Basics

While promises are often associated with asynchronous operations, they are simply placeholders for values. The value may already be known or, more commonly, the value may be the result of an asynchronous operation. Instead of subscribing to an event or passing a callback to a function, a function can return a promise, like this:

// `fetch()` promises to complete at some point in the future
const promise = fetch("book.json");

The fetch() function is a common utility function in JavaScript runtimes that makes network requests. The call to fetch() doesn't actually complete a network request immediately; that will happen later. Instead, the function returns a promise object (stored in the promise variable in this example, but you can name it whatever you want) representing the asynchronous operation so you can work with it in the future. Exactly when you'll be able to work with that result depends entirely on how the promise's lifecycle plays out.

The Promise Lifecycle

Each promise goes through a short lifecycle starting in the pending state, which indicates that promise hasn't completed yet. A pending promise is considered unsettled. The promise in the previous example is in the pending state as soon as the fetch() function return it. Once the promise completes, the promise is considered settled and enters one of two possible states:

1. Fulfilled: The promise has completed successfully.
2. Rejected: The promise didn't complete successfully due to either an error or some other cause.

An internal [[PromiseState]] property is set to "pending", "fulfilled", or "rejected" to reflect the promise's state. This property isn't exposed on promise objects, so you can't determine which state the promise is in programmatically. But you can take a specific action when a promise changes state by using the then() method.