Angular async/await

Before you start reading this article, please go through my previous articles for better understanding.

In this article, I am going to discuss more on async/await support. This async/await feature was officially announced in TypeScript 2.1. We can say this is one of the very important features of TypeScript 2.1 release.

So, what is async/await? It is nothing new; if you are a C# or Java developer, then you might have been using TPL (Task Parallel Library) in your code. Then definitely, you would have come across async/await keywords in C# or Java. So in TypeScript also, it is the same concept.

As we know, in TPL, async/await are the code markers. It marks the code positions from where the control should resume after a task completes. We cannot use await keyword without async, they are tightly coupled to each other. In Angular also, it works in the same way.

In my previous article, I explained, by default, Angular built-in HTTP services return Observable. To return the response as a Promise to a called method, at first, we have to convert the response to a Promise using toPromise() method.

Sample code snippet for Promise call.

  1. request(req: Request): Promise<any> {
  2. return this.http.request(req)
  3. .toPromise()
  4. .then((response: Response) => {
  5. return response.text().length ? response.json() : null;
  6. })
  7. .catch((error: any) => this.handleError(error, req));
  8. }

Now, let's rewrite the above code using async/await.

The sample code snippet using async/await will be something like this.

  1. async request(req: Request): Promise<any> {
  2. const resonse = await this.http.request(req).toPromise();
  3. return response.text().length ? response.json() : null;
  4. }

If you observe, in the above code, I assigned the Promise call to a constant variable directly without Promise.then() and its call back method to it. This way, our code looks like sequential code even though the asynchronous operation is involved in it.

Notes

app.component.ts

  1. constructor(private testService: TestService, private _logger: Logger) {
  2. this.testService.getTestDetails(this.testId)
  3. .then(response => this.response = response);
  4. }

to

app.component.ts

  1. async constructor(private testService: TestService, private _logger: Logger) {
  2. this.response = await this.testService.getTestDetails(this.testId);
  3. }

As a work around, we can make use of Angular life cycle hook events and can declare it as async.

The sample code is shown below.

app.component.ts

  1. constructor(private testService: TestService, private _logger: Logger) { }
  2. async ngonInit() {
  3. this.response = await this.testService.getTestDetails(this.testId);
  4. }

Is it worth using async/await in our code?

My answer is Yes; it is a matter of personal choice. If we use async/await in our code, then we will get the following benefits,

I would appreciate your valuable feedback. Happy reading.

<<Click here for the previous article