Does an async function get automatically awaited if called in a constructor?

Question

Does an async function get automatically awaited if called in a constructor?

I am currently working on updating some code due to a library upgrade that requires it to be made async. The code in question has a base class that is inherited by other classes, and I need to call some functions in the constructor that are now asynchronous. I am aware that it is not possible to await the constructor itself, but I have discovered that an async function used inside the constructor is awaited. This seems counterintuitive, but it actually works. Can anyone confirm or explain why this works?

For example:

abstract class Base {
    constructor() {
        // perform some setup
        this.asyncMethod();
    }

    abstract asyncMethod(): Promise<void>;
}

class Test extends Base {
    constructor() {
        super();
    }

    async asyncMethod(): Promise<void> {
        await setTimeout(() => console.log('Tadaaaa'));
    }
}

const instance = new Test();

javascript typescript asynchronous constructor

Answer 1

Answer №1

Indeed, it is not possible for constructors to be asynchronous.

An illustration demonstrating the lack of constructor waiting

I have created a simplified version of the original code to clearly display that the constructor does not wait for an asynchronous method. Running this code will result in 'Constructor done' being printed before 'All done', which is outputted by the async method.

class MyClass {
  constructor() {
    this.asyncMethod();
    console.log('Constructor done');
  }

  sleep(ms) {
    return new Promise(res => setTimeout(res, ms));
  }

  async asyncMethod() {
    await this.sleep(500);
    console.log('All done');
  }
}

const instance = new MyClass();

An alternative approach for achieving a similar behavior to an async constructor

To work around the limitation of constructors being async, one could make the constructor non-invokable and instead create a static method that acts as a factory for generating new instances of the class.

class Dog {
  // prevent 'new Dog()' from being called and throw an error
  constructor() {
    throw new Error('Please call await Dog.new() to create a dog.');
  }
  // a factory method to instantiate a new dog
  static async new(...args) {
    let instance = Object.create(Dog.prototype);
    instance._constructor(...args);
    return instance;
  }
  // the actual constructor logic
  async _constructor(name) {
    this.name = name;
    /* perform asynchronous tasks */
  }
}

// calling new Dog() would result in an error being thrown
async function test() {
  // create instances of dogs using the factory method
  let lassie = await Dog.new('Lassie');
  console.log(lassie.constructor.name);
  console.log(lassie);
}
test();

Answer 2

Indeed, it is not possible for constructors to be asynchronous.

An illustration demonstrating the lack of constructor waiting

I have created a simplified version of the original code to clearly display that the constructor does not wait for an asynchronous method. Running this code will result in 'Constructor done' being printed before 'All done', which is outputted by the async method.

class MyClass {
  constructor() {
    this.asyncMethod();
    console.log('Constructor done');
  }

  sleep(ms) {
    return new Promise(res => setTimeout(res, ms));
  }

  async asyncMethod() {
    await this.sleep(500);
    console.log('All done');
  }
}

const instance = new MyClass();

An alternative approach for achieving a similar behavior to an async constructor

To work around the limitation of constructors being async, one could make the constructor non-invokable and instead create a static method that acts as a factory for generating new instances of the class.

class Dog {
  // prevent 'new Dog()' from being called and throw an error
  constructor() {
    throw new Error('Please call await Dog.new() to create a dog.');
  }
  // a factory method to instantiate a new dog
  static async new(...args) {
    let instance = Object.create(Dog.prototype);
    instance._constructor(...args);
    return instance;
  }
  // the actual constructor logic
  async _constructor(name) {
    this.name = name;
    /* perform asynchronous tasks */
  }
}

// calling new Dog() would result in an error being thrown
async function test() {
  // create instances of dogs using the factory method
  let lassie = await Dog.new('Lassie');
  console.log(lassie.constructor.name);
  console.log(lassie);
}
test();

Answer 3

Answer №2

If you coded the async method test differently, it wouldn't have worked - (setTimeout does not produce a promise).

One approach is to create a private property that fetches the promise within the constructor. Then, mark any method dependent on that state as async. This ensures that the caller does not have to await during instance construction, but only when calling a related method.

Here is a demonstration:

class Test {
    #promise
    
    constructor() {
        this.#promise = this.#asyncMethod();
    }

    async #asyncMethod() {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        return response.json();
    }
    
    async title() {
        const obj = await this.#promise;
        return obj.title;
    }

    async userId() {
        const obj = await this.#promise;
        return obj.userId;
    }
    
}

// Demonstration
(async () => {
    const instance = new Test();
    const title = await instance.title();
    console.log(title);
    const userId = await instance.userId();
    console.log(userId);
})();

Answer 4

If you coded the async method test differently, it wouldn't have worked - (setTimeout does not produce a promise).

One approach is to create a private property that fetches the promise within the constructor. Then, mark any method dependent on that state as async. This ensures that the caller does not have to await during instance construction, but only when calling a related method.

Here is a demonstration:

class Test {
    #promise
    
    constructor() {
        this.#promise = this.#asyncMethod();
    }

    async #asyncMethod() {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        return response.json();
    }
    
    async title() {
        const obj = await this.#promise;
        return obj.title;
    }

    async userId() {
        const obj = await this.#promise;
        return obj.userId;
    }
    
}

// Demonstration
(async () => {
    const instance = new Test();
    const title = await instance.title();
    console.log(title);
    const userId = await instance.userId();
    console.log(userId);
})();

Answer 5

Answer №3

Indeed, it is possible to make constructors asynchronous by simply returning a promise:

#1 — Using the `async` Keyword

Pro: Returns a Promise
Pro: Easy to implement
Con: Unable to use await

class Base {
    // This constructor is technically asynchronous as it returns a Promise
    constructor() {
        // However, you cannot use `await` within the constructor
        return this.asyncMethod();
    }

    async asyncMethod() {
        // You can use `await` in this method
        return fetch('#');
    }
}

#2 — Truly Asynchronous with `async`

Pro: Returns a Promise
Pro: Allows the use of await
Con: Requires a more complex implementation

function Base(...args) {
    // This implementation truly makes the function asynchronous and returns a Promise
    async function Base(...args) {
        // You can use `await` within this function
        return await this.asyncMethod();
    }

    Base.prototype.asyncMethod = function asyncMethod() {
        // This method can be made asynchronous by using the `async` keyword
        return fetch('#');
    };

    return Base.call(null, args);
}

Answer 6

Indeed, it is possible to make constructors asynchronous by simply returning a promise:

#1 — Using the `async` Keyword

Pro: Returns a Promise
Pro: Easy to implement
Con: Unable to use await

class Base {
    // This constructor is technically asynchronous as it returns a Promise
    constructor() {
        // However, you cannot use `await` within the constructor
        return this.asyncMethod();
    }

    async asyncMethod() {
        // You can use `await` in this method
        return fetch('#');
    }
}

#2 — Truly Asynchronous with `async`

Pro: Returns a Promise
Pro: Allows the use of await
Con: Requires a more complex implementation

function Base(...args) {
    // This implementation truly makes the function asynchronous and returns a Promise
    async function Base(...args) {
        // You can use `await` within this function
        return await this.asyncMethod();
    }

    Base.prototype.asyncMethod = function asyncMethod() {
        // This method can be made asynchronous by using the `async` keyword
        return fetch('#');
    };

    return Base.call(null, args);
}

Does an async function get automatically awaited if called in a constructor?

Answer №1

An illustration demonstrating the lack of constructor waiting

An alternative approach for achieving a similar behavior to an async constructor

Answer №2

Answer №3

#1 — Using the `async` Keyword

#2 — Truly Asynchronous with `async`

Similar questions

Passport JS allows you to create a secure login form that redirects users to different URIs based on their role

Error Encountered during Deployment of Custom React App on Heroku due to Fetch API Issue

Using Angular to display exclusively the selected items from a list of checkboxes

Creating a specific quantity of divs with JavaScript

Improving the efficiency of AES decryption in Node.js

nextAuth.js is failing to access the accessToken, returning only the values {iat, exp, jti} instead

Tips on utilizing boolean assignment in a ternary operator with an optional property that is an array in TypeScript

Create custom AngularJS directives for validation and store them in a variable

Retrieve the location of the selected element

React Material-ui Dropdown Component

Create dynamic elements within bootstrap-vue using data from a JSON file

The firebase-generated observable is causing the notorious differ error as it is not iterable

Trouble with rendering inline images from markdown files in GatsbyJS

Tips for maintaining the state in a React class component for the UI while navigating or refreshing the page

Ways to stop Bootstrap collapse from displaying depending on a certain condition in bs5 framework

Buttons within the Bootstrap carousel caption cannot be clicked

Parcel React component library throws an error stating that "require is not defined

What is the best way to compare dates in order to obtain the necessary results?

Ways to stop users from inputting incorrect characters into an input field

Is it possible to implement PortalVue in multiple Vue.js single file components?

Does an async function get automatically awaited if called in a constructor?

Answer №1

An illustration demonstrating the lack of constructor waiting

An alternative approach for achieving a similar behavior to an async constructor

Answer №2

Answer №3

#1 — Using the async Keyword

#2 — Truly Asynchronous with async

Similar questions

Passport JS allows you to create a secure login form that redirects users to different URIs based on their role

Error Encountered during Deployment of Custom React App on Heroku due to Fetch API Issue

Using Angular to display exclusively the selected items from a list of checkboxes

Creating a specific quantity of divs with JavaScript

Improving the efficiency of AES decryption in Node.js

nextAuth.js is failing to access the accessToken, returning only the values {iat, exp, jti} instead

Tips on utilizing boolean assignment in a ternary operator with an optional property that is an array in TypeScript

Create custom AngularJS directives for validation and store them in a variable

Retrieve the location of the selected element

React Material-ui Dropdown Component

Create dynamic elements within bootstrap-vue using data from a JSON file

The firebase-generated observable is causing the notorious differ error as it is not iterable

Trouble with rendering inline images from markdown files in GatsbyJS

Tips for maintaining the state in a React class component for the UI while navigating or refreshing the page

Ways to stop Bootstrap collapse from displaying depending on a certain condition in bs5 framework

Buttons within the Bootstrap carousel caption cannot be clicked

Parcel React component library throws an error stating that "require is not defined

What is the best way to compare dates in order to obtain the necessary results?

Ways to stop users from inputting incorrect characters into an input field

Is it possible to implement PortalVue in multiple Vue.js single file components?

#1 — Using the `async` Keyword

#2 — Truly Asynchronous with `async`