Is it possible to determine if an object is waiting for an asynchronous member function in TypeScript?

Question

Is it possible to determine if an object is waiting for an asynchronous member function in TypeScript?

Currently, I am developing the client-side of a web application using TypeScript. Within my own makeshift "framework," I have crafted a class called ViewBinder which employs an asynchronous "show" method to fetch data from the server, extract HTML content, and inject it into the document within a designated "placeholder" element. Subsequent classes derived from this one can then link data from a client state object to the loaded HTML.

Below is a snippet of the code from this class for reference purposes (please note that it is not executable):

export class ViewBinder extends PropertyChangedNotifier {
    // Omitted a lot of member details for brevity...

    public async show(callbackAfterShow?: (wasSuccessful: boolean) => void): Promise<HtmlLoadViewResult> {
        // More code here...
    }

    public clear(): void {
        // Further code...
    }
}

In instances where the client state object undergoes modifications while a ViewBinder is in the midst of executing the 'show' command (during either 'loadView' or 'setupAfterShowing'), resulting in invoking the 'clear' method, the issue arises. This inadvertently eliminates the parent element's content where the HTML was planned to be inserted and data bound.

If the ViewBinder encounters difficulty locating a parent element or finding a suitable location within that element to exhibit data, I view it as a flaw and throw an error. Nonetheless, in certain scenarios, the HTML will be legitimately removed while the asynchronous code awaits outcomes.

I have experimented with utilizing 'showWasCanceled' to avoid potential problems, but there are numerous complexities within derived 'setupAfterShowing' methods which could lead to inconsistencies in abandoning operations if 'showWasCanceled' is true.

Therefore, my question poses:

Is there a way for the 'clear' function to ascertain whether the 'show' function is currently being awaited and halt execution until 'show' has completed?

typescript async-await

Answer 1

Answer №1

To implement this functionality, one approach is to define specific fields for storing the required information, for example:

private promise;
private resolve;
private reject;

init() {
  this.promise = new Promise((res, rej)=>{
    this.resolve = res;
    this.reject= rej;
  });
}

public asynchronous display(...) {
  ...
  resolve(null); // or reject in case of any errors above
}

public asynchronous reset() {
  await this.promise;
  ...
}

Answer 2

To implement this functionality, one approach is to define specific fields for storing the required information, for example:

private promise;
private resolve;
private reject;

init() {
  this.promise = new Promise((res, rej)=>{
    this.resolve = res;
    this.reject= rej;
  });
}

public asynchronous display(...) {
  ...
  resolve(null); // or reject in case of any errors above
}

public asynchronous reset() {
  await this.promise;
  ...
}

Answer 3

Answer №2

Opting to acknowledge @ABOS's answer, as it aligns with an async/await approach by having clear() await a promise that show() can handle.

Nevertheless, I chose a more traditional route and decided to outline my method here for the benefit of others.

This approach also eliminated the need to turn clear into an async method, which would have triggered extensive async nesting in multiple areas.

Below is a breakdown of how I tackled this:

To begin, I introduced two boolean variables to the class: clearWasCalled and isRunningShow.

Upon invoking show(), it initializes this.clearWasCalled = false and this.isRunningShow = true. Towards the end of show(), it resets this.isRunningShow = false and if this.clearWasCalled === true, then this.clear() will be invoked.

When clear() is triggered, it verifies if this.isRunningShow === true; if affirmative, it marks this.clearWasCalled = true and exits the function.

Hence, while awaiting the show() method, any calls to clear() won't disrupt the execution of show() but will simply set a flag. Once show() completes its task, it checks if the flag was raised and executes the necessary clear action.

Here's a condensed representation in code:

export class ViewBinder extends PropertyChangedNotifier {
    // Numerous internal components not displayed for conciseness...

    public clearWasCalled = false;
    public isRunningShow = false;

    public async show(callbackAfterShow?: (wasSuccessful: boolean) => void): Promise<HtmlLoadViewResult> {
        this.clearWasCalled = false;
        this.isRunningShow = true;
        const loadResult = await this.loadView();
        if (this.clearWasCalled === false) {    // As a precaution...
            loadResult.wasCanceled = true;
        } else {
            await this.setupAfterShowing(loadResult);
            // CODE OMITTED FOR BREVITY
        }
        this.isRunningShow = false;
        if (this.clearWasCalled) {
            this.clear();
            loadResult.wasCanceled = true;
        }
        return loadResult;
    }

    public clear(): void {
        // Prevent clearing while show method is active
        if (this.isRunningShow) {
            this.clearWasCalled = true;
            return;
        }

        // EXECUTE CLEAR OPERATIONS...
    }

}

Answer 4

Opting to acknowledge @ABOS's answer, as it aligns with an async/await approach by having clear() await a promise that show() can handle.

Nevertheless, I chose a more traditional route and decided to outline my method here for the benefit of others.

This approach also eliminated the need to turn clear into an async method, which would have triggered extensive async nesting in multiple areas.

Below is a breakdown of how I tackled this:

To begin, I introduced two boolean variables to the class: clearWasCalled and isRunningShow.

Upon invoking show(), it initializes this.clearWasCalled = false and this.isRunningShow = true. Towards the end of show(), it resets this.isRunningShow = false and if this.clearWasCalled === true, then this.clear() will be invoked.

When clear() is triggered, it verifies if this.isRunningShow === true; if affirmative, it marks this.clearWasCalled = true and exits the function.

Hence, while awaiting the show() method, any calls to clear() won't disrupt the execution of show() but will simply set a flag. Once show() completes its task, it checks if the flag was raised and executes the necessary clear action.

Here's a condensed representation in code:

export class ViewBinder extends PropertyChangedNotifier {
    // Numerous internal components not displayed for conciseness...

    public clearWasCalled = false;
    public isRunningShow = false;

    public async show(callbackAfterShow?: (wasSuccessful: boolean) => void): Promise<HtmlLoadViewResult> {
        this.clearWasCalled = false;
        this.isRunningShow = true;
        const loadResult = await this.loadView();
        if (this.clearWasCalled === false) {    // As a precaution...
            loadResult.wasCanceled = true;
        } else {
            await this.setupAfterShowing(loadResult);
            // CODE OMITTED FOR BREVITY
        }
        this.isRunningShow = false;
        if (this.clearWasCalled) {
            this.clear();
            loadResult.wasCanceled = true;
        }
        return loadResult;
    }

    public clear(): void {
        // Prevent clearing while show method is active
        if (this.isRunningShow) {
            this.clearWasCalled = true;
            return;
        }

        // EXECUTE CLEAR OPERATIONS...
    }

}

Is it possible to determine if an object is waiting for an asynchronous member function in TypeScript?

Answer №1

Answer №2

Similar questions

Troubleshooting: ng-If directive malfunctioning in an Ionic Cordova project with Angular

Adjust the colors of two elements by clicking a button's onclick event

Typescript: Utilizing function overloading

I am interested in showcasing a distinct screen layout specifically designed for mobile device viewing

Error: No default Firebase App named '[DEFAULT]' exists. Please remember to call Firebase App.initializeApp() to create the app (app/no-app). This issue is located at the app

When attempting to start the Azure Functions within a Nodejs Monorepo, the runtime fails with an error

Utilizing Pipes within a Method in Angular 2 along with Dependency Injection triggers an "Insufficient Number of Arguments" error

Angular2 - Mapping incoming data to predefined interface structures

Enhancing Visuals with src="imageUrl within Html"

Testing Angular Components: Ensuring Proper Unit Testing of Public Members Intended for HTML Input Only

What is the significance of `new?()` in TypeScript?

Ways to incorporate horizontal scrolling in mat autocomplete

Checking for non-falsy variables that include 0 in JavaScript

Accessing the currently operating WS server instance with NodeJS

Typescript functional programming: issue arises during transformation of postgres database output into a view model using fp-ts

React application facing a problem with bracket notation in Typescript

Leverage Custom_Pipe within TS

Filtering a multi-dimensional array in Ionic 3

Angular index.html file can include a conditional script

What is the best way to troubleshoot the type of data being sent to the subscriber of an Angular observable?