Employing async await for postponing the execution of a code block

Question

Employing async await for postponing the execution of a code block

I have been working on an Angular component where I need to perform some actions after a data service method returns some data asynchronously. Although I attempted to use async/await in my code, I feel that I may not have fully understood how it works. Here is the method I have implemented in the component:

async redrawGrid(params: any) {
        let v;
        try {
            v = await this.innerGridService.loadAccountList()
        } catch (error) {
            // handle error
        }
        
        params.node.childFlower.setRowHeight((this.globalRowCount * 46) + 48);
        this.gridOptions.api.onRowHeightChanged();
}

The loadAccountList() method in my service returns an observable:

...
@Injectable()
export class ClientListService { 
...
responseObject$: Observable<ResponseObject>;
...

}
loadAccountList() {
    this.logService.info('InnerGridService loadAccountList()');

    if (this.dataStore.responseObject) {
        this.refreshDataStore();
    }
    let token = this.authenticationService.getToken();
    let headers = new Headers({ 'netx.esf.AuthenticationService': token });
    let options = new RequestOptions({ headers: headers });

    this.http.get(`${this.baseUrl}`, options)
    .map((response: Response) => response.json())
    .subscribe(
    (data: InnerGridResponse) => {
        this.formatData(data.response.accountlist);
        this.dataStore.InnerGridResponse = data;
        this.dataStore.responseObject = data.response;
        this._InnerGridResponse.next(Object.assign({}, this.dataStore).InnerGridResponse);
        this._responseObject.next(Object.assign({}, this.dataStore).responseObject);
        if (data.errorCode === 0 || data.errorCode === 90) { // success
            this.logService.info('loadAccountList() success: ', data.errorCode);
            this.clearError();
        } else { // error code from backend
            this.logService.error('loadAccountList() errorCode: ', data.errorCode);
            this.setError(this.message[0], data.errorCode);
        }
    },
    error => { // exception
        this.logService.error('loadAccountList() exception:', error);
        this.setError(this.message[0], error._body);
        // throw error;
    });

    return this.responseObject$;
}

angular typescript asynchronous

Answer 1

Answer №1

I must admit, the code you've shared here is in need of some major restructuring.

You seem to be stuck in a classic anti-pattern where data is being transferred from one stream to another, akin to pouring water from a hose into a bucket and then attempting to pour that water back into another hose. It would be more efficient to simply connect the hoses together or just pass on the original hose to someone else.

In simpler terms, a service should ideally not subscribe to an observable and perform operations on it. Instead, it should just return the observable, usually after some mapping. The actual subscription should take place in the consumer (the component), either within the TypeScript logic or in the template using the async pipe.

Without fully grasping the details of your service, I won't attempt to rewrite it all. However, the fundamental structure should resemble something like this:

locaAccountList(): Proimse<AccountList> {
  return this.http.get(URL)
    .map(response => response.json())
    .toPromise()
    .then(json => makeAccountListFromJson(json));
}

In my revision, I've modified the function to return a promise instead of an observable by utilizing toPromise. This approach is commonly used with this.http since it typically returns an observable with only one emission. By doing so, you can use await to wait for the result as opposed to waiting for an observable to emit. Remember, await works with promises, not observables.

After reformatting your service, the corresponding component can execute functions like so:

async redrawGrid(params: any) {
  await this.innerGridService.loadAccountList();

  // Code to be executed post loadAccountList() data retrieval
  params.node.childFlower.setRowHeight( (this.globalRowCount * 46 ) + 48);
  this.gridOptions.api.onRowHeightChanged();
}

The try block may not be necessary since errors within an async function will naturally propagate down and result in a rejected promise at the end. Furthermore, it's not entirely clear how you intend to utilize the outcome of invoking loadAccountList().

Answer 2

I must admit, the code you've shared here is in need of some major restructuring.

You seem to be stuck in a classic anti-pattern where data is being transferred from one stream to another, akin to pouring water from a hose into a bucket and then attempting to pour that water back into another hose. It would be more efficient to simply connect the hoses together or just pass on the original hose to someone else.

In simpler terms, a service should ideally not subscribe to an observable and perform operations on it. Instead, it should just return the observable, usually after some mapping. The actual subscription should take place in the consumer (the component), either within the TypeScript logic or in the template using the async pipe.

Without fully grasping the details of your service, I won't attempt to rewrite it all. However, the fundamental structure should resemble something like this:

locaAccountList(): Proimse<AccountList> {
  return this.http.get(URL)
    .map(response => response.json())
    .toPromise()
    .then(json => makeAccountListFromJson(json));
}

In my revision, I've modified the function to return a promise instead of an observable by utilizing toPromise. This approach is commonly used with this.http since it typically returns an observable with only one emission. By doing so, you can use await to wait for the result as opposed to waiting for an observable to emit. Remember, await works with promises, not observables.

After reformatting your service, the corresponding component can execute functions like so:

async redrawGrid(params: any) {
  await this.innerGridService.loadAccountList();

  // Code to be executed post loadAccountList() data retrieval
  params.node.childFlower.setRowHeight( (this.globalRowCount * 46 ) + 48);
  this.gridOptions.api.onRowHeightChanged();
}

The try block may not be necessary since errors within an async function will naturally propagate down and result in a rejected promise at the end. Furthermore, it's not entirely clear how you intend to utilize the outcome of invoking loadAccountList().

Answer 3

Answer №2

To delay the process until the data is fetched, relocate the subscription from the service to the redrawGrid function and insert the necessary code inside the subscribe callback.

Answer 4

To delay the process until the data is fetched, relocate the subscription from the service to the redrawGrid function and insert the necessary code inside the subscribe callback.

Answer 5

Answer №3

An easy solution to this problem is as follows:

async updateGridDisplay(parameters: any) {
        let result;
        try {
            // take note of the .toPromise() method
            result = await this.gridService.fetchData().toPromise();
        } catch (error) {
            // handle errors here
        }
        // Code that needs to run after fetching data from fetchData()
        parameters.node.updateRowStyle( (this.totalRowCount * 46 ) + 48);
        this.dataGridOptions.api.onRowHeightChanged();
}

Answer 6

An easy solution to this problem is as follows:

async updateGridDisplay(parameters: any) {
        let result;
        try {
            // take note of the .toPromise() method
            result = await this.gridService.fetchData().toPromise();
        } catch (error) {
            // handle errors here
        }
        // Code that needs to run after fetching data from fetchData()
        parameters.node.updateRowStyle( (this.totalRowCount * 46 ) + 48);
        this.dataGridOptions.api.onRowHeightChanged();
}

Employing async await for postponing the execution of a code block

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to link the value of a mat-slider to an input field in a reactive form?

Webpack 5 is failing to bundle re-exports correctly

Enhance your production bundle in Angular CLI 7 by incorporating defer/async attributes

Cannon-js: Experience dynamic body bouncing on the y axis as it reacts to force applied on the x and z axes

Updating Firebase token in Angular when it has expired

TypeScript version 3.7 has implemented a new feature where it will now display errors for each individual invalid prop instead of grouping them together as it

Is it feasible to incorporate a multi-level navigation menu into the "NavItem" component using MaterialUI with TypeScript?

What causes my browser fingerprint to consistently remain unchanged?

Create a TypeScript view component that encapsulates an HTMLElement for seamless integration with TweenMax

Finding the perfect pairing: How to align counters with objects?

Exporting a object in Angular2 Using TypeScript

Tips for utilizing 'safe-json-stringify' within Angular 4 Application

Managing Time Before Browser Refresh in AngularLearn how to monitor and examine the time remaining before

Execute environment validation on server during `next build` command

Issue with Nativescript Angular router version 3.0.0-alpha.7 causing navigation errors

Sharing data between two components in an Angular2-Meteor application

A guide on extracting a JSON data with a BigInt type using TypeScript

Enhancing performance with React.memo and TypeScript

Maintain division contents while navigating

Issue with redirecting users back to the login page after accepting Keycloak required actions due to browser specific terms and conditions