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

How to utilize FileReader for parsing a JSON document?

Tips on how to verify if the Angular test with native elements has produced an error

Ways to check my component using ActivatedRoute?

Encountering a Typings Install Error When Setting Up angular2-localstorage in WebStorm

The Aurelia application encounters a "Maximum call stack size exceeded" error while trying to bind FullCalendar

Having difficulty handling text overflow in Angular4 and HTML

Is it possible to create Interactive Tabs using a Global BehaviorSubject?

Installing a package from GitHub with a specific tag using NPM

Unable to retrieve notes(data) from API using the user ID

What is the best way to execute AJAX requests in a loop synchronously while ensuring that each request is completed

Is it possible to implement a redirect in Angular's Resolve Navigation Guard when an error is encountered from a resolved promise?

Access to this feature is restricted when using a decorator in TypeScript with NodeJS

Issues with Angular unit tests failing due to an unexpected phantomJS error

Clicking on the button in Angular 2+ component 1 will open and display component 2

Retrieve the observable value and store it in a variable within my Angular 13 component

Attempting to perform an API invocation on a distant endpoint utilizing NestJS

Utilizing the FormsModule and ReactiveFormsModule within a Component module

Using the Start-Job command in PowerShell does not seem to be compatible with Selenium

Bringing in AuthError with TypeScript from Firebase

What is the correct way to implement Vue.use() with TypeScript?