Async Method

An asynchronous method in JavaScript is a function declared with the async keyword that operates asynchronously via the event loop. It guarantees that the function’s return value is always a newly allocated Promise object. If the function returns a non-Promise value, the JavaScript engine implicitly wraps it in a resolved Promise. If the function throws an exception, it returns a rejected Promise. Crucially, if the function returns an existing Promise, the async function does not return it as-is; instead, it returns a new Promise that adopts the state (fulfillment or rejection) of the returned Promise, meaning the returned object reference is always distinct.

A primary technical utility of an async method is establishing an execution context where the await operator can be utilized. (Note: As of ES2022, Top-Level await allows the await keyword to be used entirely outside of async functions at the top level of ES modules).

The await keyword pauses the execution of the async function until its operand settles (either fulfills or rejects). This operand does not strictly need to be a Promise; await accepts non-Promise values (e.g., await 42), which the engine implicitly treats as a resolved Promise. During the pause, control is yielded back to the calling execution context, preventing the main thread from blocking. Once the awaited operand settles, the continuation of the async function is scheduled on the microtask queue.

Syntax Variations

The async modifier can be applied to various function definitions, including declarations, expressions, arrow functions, and class/object methods:

// Function Declaration
async function asyncDeclaration() {
  return 1;
}

// Function Expression
const asyncExpression = async function() {
  return 2;
};

// Arrow Function
const asyncArrow = async () => {
  return 3;
};

// Object Method
const obj = {
  async asyncMethod() {
    return 4;
  }
};

// Class Method
class MyClass {
  async asyncClassMethod() {
    return 5;
  }
}

Return Value Mechanics

Because an async method strictly returns a newly allocated Promise, standard return statements and thrown errors are automatically transformed by the engine:

async function returnPrimitive() {
  return "string"; 
  // Engine transforms to a new Promise resolved with "string"
}

async function throwError() {
  throw new Error("fail"); 
  // Engine transforms to a new Promise rejected with the Error
}

async function returnPromise() {
  const p = Promise.resolve("existing promise");
  return p; 
  // Returns a NEW Promise that adopts the state of 'p'.
  // The expression (returnPromise() === p) evaluates to false.
}

Execution Flow and await

When await is used within an async method, it unwraps the resolved value of the operand. If the awaited operand is a rejected Promise, the await expression throws the rejection reason as an exception, which can be intercepted using standard synchronous try...catch blocks.

async function executionFlow() {
  try {
    // Execution context pauses here until the Promise fulfills
    const result = await Promise.resolve(10);
    
    // Awaits a non-Promise value; implicitly treated as Promise.resolve(2)
    const multiplier = await 2;
    
    // The following code executes in a new microtask
    const mathematicalOperation = result * multiplier; 
    
    // Awaited rejections are thrown as synchronous exceptions
    await Promise.reject(new Error("Rejection reason"));
    
    // This line is unreachable due to the thrown error above
    return mathematicalOperation; 
  } catch (error) {
    // Catches the rejected Promise from the await expression
    return error.message; 
  }
}

Master JavaScript with Deep Grasping Methodology!

Learn More