Promise Chain to Async/Await Converter

Try These Examples

• fetch → JSON — A typical fetch call with JSON parsing, data handling, and error catching
• Chained transforms — Multiple .then() calls that pass values through a pipeline
• Nested fetch — A fetch that triggers a second request based on the first result

How It Works

The converter applies a set of heuristic rules to transform Promise-based code into async/await style:

• Chain detection — The tool scans for .then() calls and splits the chain into individual steps. Each .then() callback becomes a separate await statement.
• Parameter extraction — Arrow function parameters like response => become variable names in const response = await ... assignments.
• Body unwrapping — Single-expression arrow functions (x => x.json()) and block-body callbacks (x => { ... }) are both handled. Multi-line bodies are inlined with their statements preserved.
• Error handling — A trailing .catch() is converted to a try/catch block that wraps all the preceding await statements.
• Wrapping — The result is wrapped in an async function so the await keyword is valid. If the original code is already inside a function, the wrapper adapts accordingly.

Because this is heuristic-based rather than a full AST parser, certain patterns require manual cleanup. The converter works well for the majority of real-world fetch() chains and sequential asynchronous pipelines.

What async/await improves

The async/await syntax, introduced in ES2017, provides several advantages over raw Promise chains:

• Readability — Code reads top-to-bottom like synchronous code, eliminating the rightward drift of nested .then() callbacks.
• Error handling — Standard try/catch blocks replace .catch() chains, making it easier to handle errors at specific points.
• Debugging — Stack traces are cleaner, and you can set breakpoints on individual await lines rather than stepping through callback wrappers.
• Intermediate values — Variables declared with const stay in scope for subsequent lines, so you don't need to pass values through the chain or nest closures.

Under the hood, async/await still uses Promises. An async function always returns a Promise, and await pauses execution until the Promise settles. The Event Loop Visualiser can help you see exactly how Promises and microtasks are scheduled in the browser's event loop.

Limitations of automatic conversion

Heuristic conversion cannot cover every pattern. You should review the output and manually adjust when you encounter:

• Parallel promises — Promise.all([a(), b()]) should stay as-is (just add await in front). Converting each to sequential await would lose the parallelism.
• Conditional chains — Code that conditionally returns different Promises inside a .then() may need restructuring with if/else blocks.
• Promise utilities — Promise.race(), Promise.allSettled(), and Promise.any() are best kept as-is and simply awaited.
• Deeply nested callbacks — Chains that mix callbacks, event listeners, and Promises may need manual refactoring beyond what a simple converter can provide.

Before and after

fetch('/api/users')
  .then(res => res.json())
  .then(users => {
    console.log(users);
    return users.length;
  })
  .catch(err => {
    console.error(err);
  });

async function main() {
  try {
    const res = await fetch('/api/users');
    const users = await res.json();
    console.log(users);
    const result = users.length;
  } catch (err) {
    console.error(err);
  }
}

Frequently Asked Questions

Related Tools