{{announcement.body}}
{{announcement.title}}

Difference Between Observable and Promise in Angular 8

DZone 's Guide to

Difference Between Observable and Promise in Angular 8

In this article, we discuss the difference between Promises and Observables in Angular 8 and when to use each for API requests.

· Web Dev Zone ·
Free Resource

Introduction 

Observable and Promise both provide us with abstractions that help us deal with the asynchronous nature of applications.

Promise

Promises work with asynchronous operations. They either return a single value (i.e the promise resolves) or an error message (i.e the promise rejects).

Another important thing to remember regarding promises is that a request initiated from a promise is not canceled.

 Disadvantages of Promise:

  1. User could not cancel a request to the API.
  2. User could not retry a failed call.
  3. As our application gets bigger, promises become hard to manage.

Observable

An Observable is an array or a sequence of events over time. It has at least two participants, the creator (the data source) and the subscriber (subscription where data is being consumed). Compared to a promise, an observable can be canceled.

RxJS is all about unifying the ideas of promise callbacks and data flow and making them easier to work with. Observables provide operators, like map, forEach, reduce...similar to an array.

There are also powerful operators like retry(),  reply(), retryWhen(), delay().

Prerequisites

  • Basic knowledge of Angular.
  • Visual Studio Code must be installed.
  • Angular CLI must be installed.
  • Node JS must be installed.

Backend

Here, with the backend-related code, we will use SQL Server.

The very first step is to create a database.

Step 1

Let’s create a database on your local SQL Server. I hope you have installed SQL Server 2017 in your machine (you can use SQL Server 2008, 2012, or 2016, as well).

SQL


Step 2

 Create a Country table using the following code:

SQL


Now, let's add Store Procedures.

Step 3

 Create a Stored Procedure with the following code:

SQL


Web API

Create an ASP.NET Core application with the following steps.

Step 1

 In Visual Studio 2019, click on File -> New -> Project.

Creating a new project
Creating a new project

Step 2

 Choose the Create option and select ASP.NET web application.

Creating an ASP.NET web application
Creating an ASP.NET web application

Step 3

Select Web API and click OK.

Adding Web API to project
Adding Web API to project

Step 4 

Now, right-click on the controller and add a new item.

Adding a new item

Adding a new item

Step 5

Choose Ado.NET Entity Data Model, and then click on Add.

Adding data entity model
Adding data entity model

Step 6

The next step is EF Designer, just click on Next

Adding EF Designer
Adding EF Designer

Step 7

A new pop-up will show. Click on Next. If yours isn't established, then click on a new connection 

Adding a new connection
Adding a new connection

Step 8

Copy your database connection server name and paste it in the server name textbox. You will see all the databases. Select your database and click on OK.

Adding database connection

Adding database connection

Step 9

Here, in the new screen, select your tables and store the procedure. Then, click on finish:

Getting table and store procedure
Getting table and store procedure

Our next step is to right-click on the Controllers folder and add a new controller. Name it "CountryController" and add the following namespace in the CountryController. 

Complete CountryController code

C#


Frontend 

Step 1

 Let's create a new Angular project using the following NPM command,

TypeScript


Step 2

Now, let's create a new component for "Observable " by using the following command:

TypeScript


Step 3

Now, let's create a new component for "Promise" by using the following command,

TypeScript


Here, I am creating two different components one for observable example and another for promise. First, we will see the example for Promise.

Step 4

Now, open the promise-example.component.html file and add the following code:

HTML


Step 5 

Now, open the promise-example.component.ts file and add the following code in this file:

TypeScript


Step 6

The next step is to create a service.

TypeScript


Now, open the country.service.ts file and add the following code in this file:

TypeScript


Step 7

Open file app.module.ts and paste the following code:

TypeScript

 

Step 8

Now, open the app.component.html file and add the following code:

HTML


Now, it's time for the output:

Fetching data using a Promise
Fetching data using a Promise

As we can see, whenever I am typing the key, it's hitting the API every time (i.e it's going to the server every time and getting the data).

Example of Observable: 

Step 9 

Now, open the observable-example.component.html file and add the following code in the file:

HTML


Step 10

Now, open the observable-example.component.ts file and add the following code:

TypeScript


Step 11

Replace the app.component.html file with the following code:

HTML


Now, its time for the output for Observable:

 API request with Observable

Fetching data using an Observable

As we can see, as soon as I press the key, it's hitting the API every 400 milliseconds, so rather than hitting it on every keypress, it's hitting every 400-milliseconds using the debounceTime operator in RxJS

So, with the help of RxJS operators, we can achieve this so that it can improve our application performance. 

Conclusion

In this article, we have seen the difference between Observable and Promise in Angular 8 application.

Please give your valuable feedback/comments/questions about this article. Please let me know how to improve it.

Topics:
angular 8 ,javascript ,observable ,promise ,typescrip ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}