Understanding JavaScript Promises: Concepts, API, and Practical Examples

Promises are a fundamental abstraction for handling asynchronous operations in JavaScript, eliminating the “callback hell” problem that arises with nested AJAX calls.

The article first reviews callback functions, then introduces why Promises are needed, followed by a detailed description of the Promise API: the constructor, instance methods then and catch, and static methods Promise.resolve, Promise.reject, Promise.all, and Promise.race.

Several code snippets illustrate creating a Promise, chaining calls, handling errors, and wrapping AJAX requests:

var promise = new Promise((resolve, reject) => {
    if (true) { resolve(100); }
    if (false) { reject('error'); }
});
promise.then(value => console.log(value))
       .catch(error => console.error(error));

Further examples show how then returns a new Promise, enabling sequential data flow, and how Promise.all and Promise.race coordinate multiple asynchronous tasks.

Promise.all([timerPromisefy(1), timerPromisefy(32)])
       .then(values => console.log(values)); // [1,32]
Promise.race([timerPromisefy(1), timerPromisefy(32)])
       .then(value => console.log(value)); // 1

The article also compares callbacks, Promises, and async/await, highlighting the advantages of each approach, and provides a minimal custom implementation of a Promise class to deepen understanding of its internal mechanics.

class MyPromise {
    constructor(handle) { /* ... */ }
    then(onFulfilled, onRejected) { /* ... */ }
    catch(onRejected) { return this.then(undefined, onRejected); }
    static resolve(value) { /* ... */ }
    static reject(value) { /* ... */ }
    static all(list) { /* ... */ }
    static race(list) { /* ... */ }
}