JavaScript Tutorial for Async / Await with Angular 7/8 Observation example and HTTP

JavaScript Tutorial for Async / Await with Angular 7/8 Observation example and HTTP

In this tutorial, we'll learn about JavaScript/ES7 async and await keywords and we'll see how you can use them to write better asynchronous code in your Angular 7/8 apps with an example using HttpClient for sending HTTP requests and RxJS Observables.

The async and await keywords are simply syntactic sugar over ES6 Promises and they make it one more step forward toward using fewer callbacks in your code.

According to MDN:

An async function can contain an await expression that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and evaluates as the resolved value.
Remember, the await keyword is only valid inside async functions. If you use it outside of an async function's body, you will get a SyntaxError.

A function that returns a Promise can be written using the async keyword and use the await keyword inside the body to wait for the asynchronous operation allowing you to write the asynchronous synchronously.

You don't need to provide callbacks or the then() method to run some code after the asynchronous operation is done since your code will wait until it the operation finishes before executing the next lines similar to synchronous code.

Let's see a simple plain JavaScript example before we see a more real-world example with Angular 8.

Let's take as example this promise:

waitForOneSecond() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve("I promise to return after one second!");
      }, 1000);
    });
  }

We can run the code inside the promise body using the following code:

promiseMethod(){
    waitForOneSecond().then((value) => console.log(value));
}

Promises were created to make less use of callbacks but then() itself uses a callback function. This is fine for this simple example but can be problematic and error-prone for large amounts of code.

Let's now see how to use the async /await syntax to eliminate the use of the callback. Since the waitForOneSecond() method returns a promise, it can be awaited using the await keyword:

async asyncMethod() {
const value = await waitForOneSecond();
console.log(value);
}

The values that we can get, when the promise is resolved or rejected, from the callback, passed to the then() method is now returned from the awaited method.

Example with Angular 7/8 and HTTP

Now that we have the basic usage of the async/await syntax, let's see a simple real-world example using TypeScript and Angular.

In the previous tutorial of JavaScript promises, we've seen an example that uses HttpClient to send an API request to a JSON endpoint.

We have set up HttClient in our example in the online Stackblitz IDE and defined a fetchData() method that calls the get() method for fetching JSON data. This is our component:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { name = 'Angular'; apiUrl = 'https://www.techiediaries.com/api/data.json';

constructor(private httpClient: HttpClient){}

ngOnInit(){ this.fetchData(); }

private fetchData(){ const promise = this.httpClient.get(this.apiUrl).toPromise(); console.log(promise);
promise.then((data)=>{ console.log("Promise resolved with: " + JSON.stringify(data)); }).catch((error)=>{ console.log("Promise rejected with " + JSON.stringify(error)); }); } }

How to await an Observable?

Angular APIs like HttpClient make use of RxJS Observables instead of promises to handle asynchronous operations so how we can await an Observable since the async/await syntax is designed for promises?

The RxJS Observable interface provides the toPromise() method that can be used to get a promise from the Observable.

Using HttpClient with Promises using toPromise

RxJS provides the toPromise() operator which converts an Observable to a promise so you can work with the HttpClient methods using promises instead of Observables. We have previously seen that with an example:

  private fetchData(){
    const promise = this.httpClient.get(this.apiUrl).toPromise();
    console.log(promise);
promise.then((data)=>{ console.log("Promise resolved with: " + JSON.stringify(data)); }).catch((error)=>{ console.log("Promise rejected with " + JSON.stringify(error)); });

We call the get() method which returns an Observable but thanks to toPromise() we get a promise and we call the then() method to send the API request and provide a callback that displays date once it's fetched.

HttpClient' Observable vs. Promise

We can use either Observables or Promises to work with HttpClient or with any other API in Angular but it there any difference between except the set of features that comes with RxJS?

When working with an Observable, you would use the subscribe() method for getting data. When you subscribe, the callback that you provide to the subscribe() method will be executed once or multiple times whenever there is some new data. But when you convert the Observable to a promise, the callback provided to the then() method is executed one time no more. If you don't need to observe a source for a stream of data that comes in different points of time, you can use promises instead of Observables which need to be unsubscribed or otherwise will cause memory leaks and unexpected behaviors if not handled right.

Using HttpClient with async/await:

Using the async/await syntax, you avoid subscribing and unsubscribing from Observables but also the then() callback of a promise which allows you to write better code that looks synchronous even when making asynchronous operations.

Let's convert the fetchData() of our previous example to use the async/await syntax:

  private async fetchData(){
    const data = await this.httpClient.get(this.apiUrl).toPromise();
    console.log("Data: " + JSON.stringify(data)); 
  }

See the example from this link

Conclusion

In this tutorial, we've learned about the JavaScript async/await keywords and seen an example Angular 7/8 example that demonstrates how to use HttpClient with promises and async/await and how to wait for an RxJS Observable.

Originally published  at techiediaries.com on 05 Sep 2019

===========================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

7 Reasons Why JavaScript Async/Await Is Better Than Plain Promises (Tutorial)

JavaScript — from callbacks to async/await

Write beautiful Node.js APIs using async/await and Firebase

Angular + WebSocket + Node.js Express = RxJS WebSocketSubject ❤️

Angular7 CRUD with nodejs and mysql example


javascript angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

How to Build an Angular Application with Angular CLI

How to set up the Angular CLI and generate a Trivial App

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.