call async function from non async

Breiz Heurope

3 min read

·

09-03-2025

1

0

Share

Async functions, introduced in ES2017, elegantly handle asynchronous operations using the async and await keywords. However, you might find yourself needing to call an async function from a non-async (synchronous) function. This presents a slight challenge, as await can only be used within async functions. This article explores the different ways to achieve this, highlighting their advantages and potential pitfalls.

Understanding the Problem

The core issue stems from the fundamental difference between synchronous and asynchronous operations. Synchronous code executes line by line, completing one task before moving to the next. Asynchronous code, on the other hand, can initiate operations that run concurrently without blocking the main thread. await pauses execution within an async function until a Promise resolves, allowing asynchronous tasks to complete without halting the program's flow. Trying to await a Promise directly within a synchronous function will result in an error.

Methods for Calling Async Functions from Synchronous Functions

There are several approaches to tackle this:

1. Using .then()

The simplest method involves using the .then() method, which is a Promise method. Since async functions implicitly return a Promise, you can chain .then() to handle the resolved value.

async function myAsyncFunction() {
  return "Hello from async!";
}

function mySyncFunction() {
  myAsyncFunction()
    .then(result => {
      console.log(result); // Outputs: "Hello from async!"
    })
    .catch(error => {
      console.error("Error:", error);
    });
  console.log("This line executes before the async function completes.");
}

mySyncFunction();

This approach allows the synchronous function to continue execution immediately. The callback inside .then() handles the result once the async function finishes. The .catch() block manages any potential errors.

Advantages: Simple, straightforward for basic scenarios.

Disadvantages: Can lead to callback hell with complex asynchronous operations. Doesn't provide the readability and structure of async/await.

2. Wrapping with an Async IIFE (Immediately Invoked Function Expression)

An Immediately Invoked Function Expression (IIFE) can be used to create an immediately executed anonymous asynchronous function. This allows you to use await inside the IIFE, effectively bridging the gap between synchronous and asynchronous code.

async function myAsyncFunction() {
  return "Hello from async!";
}

function mySyncFunction() {
  (async () => {
    const result = await myAsyncFunction();
    console.log(result); // Outputs: "Hello from async!"
  })();
  console.log("This line executes before the async function completes.");
}

mySyncFunction();

The IIFE encapsulates the await call, making it possible to use await and achieve cleaner code than with .then().

Advantages: Cleaner than nested .then() calls, offers the readability of await.

Disadvantages: Can still be cumbersome for managing multiple asynchronous operations, may be less familiar to developers not used to IIFEs.

3. Using Promise.all (for Multiple Async Functions)

If you need to call multiple async functions, Promise.all provides a more elegant solution.

async function asyncFunc1() { return 1; }
async function asyncFunc2() { return 2; }
async function asyncFunc3() { return 3; }

function mySyncFunction() {
  Promise.all([asyncFunc1(), asyncFunc2(), asyncFunc3()])
    .then(results => console.log(results)) //Outputs: [1, 2, 3]
    .catch(error => console.error("Error:", error));
}

mySyncFunction();

Promise.all waits for all provided Promises to resolve before executing the .then() block.

Advantages: Efficiently handles multiple async functions concurrently.

Disadvantages: Not suitable for single async function calls. Error handling requires .catch().

Choosing the Right Approach

The best approach depends on the complexity of your asynchronous operations. For simple scenarios, .then() might suffice. For more complex scenarios or when using multiple async functions, an IIFE or Promise.all provides better structure and readability. Always consider error handling within your chosen method, using .catch() to gracefully manage potential issues. Remember that even though you're calling the async function from a synchronous context, the underlying asynchronous nature of the operation remains; it will not block the main thread.