JavaScript Asynchronous Processing: From Callbacks to Promise and Async/Await

A comprehensive guide to JavaScript async processing covering the event loop mechanism, callback hell, Promise chaining, and async/await syntax with code examples.

6 min read

Why Asynchronous Processing Matters in JavaScript

Single-Threaded

JavaScript fundamentally operates as single-threaded. This means it can only execute one task at a time. In web browser environments, the JavaScript execution thread shares the same thread as the browser’s UI rendering processes such as page layout, repaint (reflow), and garbage collection.

Therefore, if a time-consuming JavaScript process occupies the thread, page responsiveness degrades and the user interface appears frozen. Asynchronous processing is essential to solve this problem.

How Asynchronous Processing Works

Asynchronous processing separates time-consuming tasks (e.g., network requests, timers) from the main thread and allows the next operation to proceed without waiting for those tasks to complete. This prevents UI freezing and creates the appearance of parallel execution.

Event Loop

JavaScript’s asynchronous processing is achieved through a mechanism called the event loop. The JavaScript engine (such as V8) works with the following main components.

  • JavaScript Engine:
    • Heap: A memory area where objects and variables are stored.
    • Call Stack: A LIFO (Last In, First Out) area that manages currently executing function calls. Functions are pushed onto the stack when called and removed when execution completes.
  • Web APIs (Browser Environment):
    • API groups provided by the browser (DOM manipulation, Ajax requests, timer functions like setTimeout, etc.). These operate on threads separate from the JavaScript engine.
  • Event Queue / Task Queue:
    • A FIFO (First In, First Out) queue where callback functions received from Web APIs are stored.

The event loop coordinates asynchronous processing as follows.

  1. JavaScript code executes and function calls are pushed onto the call stack.
  2. When asynchronous functions like setTimeout or fetch are called, the task is passed to Web APIs and processing begins in the Web API execution environment.
  3. When processing in a Web API completes, the result (or callback function) is placed in the event queue.
  4. The event loop constantly monitors whether the call stack is empty (no tasks currently executing on the main thread).
  5. When the call stack becomes empty, the event loop takes the first callback function from the event queue, pushes it onto the call stack, and executes it.

Callback Hell

In early JavaScript async processing, callback functions were heavily used to wait for processing completion before executing the next task. However, when multiple async operations are chained, callback functions become deeply nested, severely degrading code readability and maintainability. This is called “callback hell.”

// Callback hell example
setTimeout(() => {
    console.log(1);
    setTimeout(() => {
        console.log(2);
        setTimeout(() => {
            console.log(3);
        }, 300); // Execute after 300ms
    }, 200); // Execute after 200ms
}, 100); // Execute after 100ms

To solve this problem, Promise was introduced in ES2015.

Promise Object [ES2015]

Promise is an object introduced in ES2015 (ECMAScript 2015) that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It wraps the state of an asynchronous operation and provides a mechanism to call registered callbacks when that state changes.

Basic Usage of Promise

The Promise constructor takes a function with two arguments: resolve and reject.

// asyncPromiseTask function returns a Promise instance
function asyncPromiseTask() {
    return new Promise((resolve, reject) => {
        // Write asynchronous processing here
        // Call resolve() on success
        // Call reject(error object) on failure
        const success = Math.random() > 0.5; // Example: 50% chance of success
        setTimeout(() => {
            if (success) {
                resolve("Success!");
            } else {
                reject(new Error("Failed..."));
            }
        }, 1000);
    });
}

// Register callbacks using then() for when the Promise resolves or rejects
asyncPromiseTask()
    .then((result) => {
        console.log("Success handler:", result);
    })
    .catch((error) => { // Register failure handler with catch() (recommended)
        console.error("Failure handler:", error.message);
    })
    .finally(() => { // Register handler that runs regardless of success/failure
        console.log("Processing complete.");
    });

Promise States

A Promise instance internally has one of the following three states.

  • Pending: The initial state where the asynchronous operation has not yet completed.
  • Fulfilled: The state where the asynchronous operation succeeded and a result value is available. Enters this state when resolve() is called.
  • Rejected: The state where the asynchronous operation failed and an error occurred. Enters this state when reject() is called.

Once a Promise becomes Fulfilled or Rejected, it will not change to another state.

Promise Chaining

When you want to execute multiple asynchronous operations sequentially, use Promise chaining. Since then() always returns a new Promise instance, you can chain additional then() and catch() methods on its return value. This eliminates callback hell and improves code readability.

Promise.resolve()
    .then(() => {
        console.log("Step 1");
        return asyncPromiseTask(); // Return a Promise
    })
    .then((result) => {
        console.log("Step 2:", result);
        return "Next data"; // Return a value (automatically wrapped with Promise.resolve)
    })
    .then((data) => {
        console.log("Step 3:", data);
    })
    .catch((error) => {
        console.error("An error occurred:", error.message);
    });

Limitations of Promise

While Promise solved callback hell, some challenges remained.

  • Coordination between async operations becomes a chain of then() methods, still a special coding style compared to synchronous code.
  • Error handling uses the catch() method rather than the try...catch syntax, which can be less intuitive.
  • Promise is just an object without language-level syntax support, leading to demand for more natural async code writing.

Async/Await [ES2017]

async/await is JavaScript syntax based on Promise that allows asynchronous processing to be written more like synchronous code.

async Functions

Adding the async keyword before a function declares it as an asynchronous function. async functions always return a Promise instance.

async function doAsync() {
    return "value"; // This value is wrapped as Promise.resolve("value")
}

// The above is roughly equivalent to:
function doAsyncLegacy() {
    return Promise.resolve("value");
}

await Expression

The await keyword, usable only within async functions, waits for a Promise to resolve (Fulfilled or Rejected). Using await allows you to wait for async processing to complete before executing the next line of code, enabling a more intuitive, readable synchronous-style writing of the flow that was previously achieved with Promise chaining.

async function asyncMain() {
    console.log("Processing started");
    // Wait until the Promise resolves
    const result = await asyncPromiseTask(); // asyncPromiseTask returns a Promise
    console.log("Promise resolved:", result);
    console.log("Processing finished");
}

asyncMain();

Error Handling

The await expression throws an error when a Promise is Rejected. This allows async processing errors to be caught using the standard try...catch syntax, just like synchronous processing, making error handling very simple.

async function asyncMainWithErrorHandling() {
    try {
        console.log("Starting potentially error-prone processing");
        const value = await asyncPromiseTask(); // Promise that may fail
        console.log("Success:", value);
    } catch (error) {
        console.error("Error caught:", error.message);
    } finally {
        console.log("Finally block executed.");
    }
}

asyncMainWithErrorHandling();

async/await dramatically improved JavaScript’s asynchronous processing, enabling even complex async logic to be written concisely.

関連記事