IONIC V3 | HTTPCLIENTMODULE | ADVANCE

Share the post
Use_Of_HttpClientModule

Use of HttpClientModule :

In this topic, We will see What is HttpClientModule in Ionic? I divided this topic into two parts In part 1 we will see how to import HttpClientModule & Create Common Provider for the same. In Part 2 We will see How to call the service created in Part – 1 Provider.

Use of HttpClientModule -Part1 :

Today we will see the most important topic that is HttpClientModule.When we build any online mobile application we need to do some HTTP calls to communicate with our server. Exactly here the role of HttpClientModule came into the picture. We use angular HttpClientModule to HTTP calls. How ? we will see that step by step.

You need to import HttpClientModule at app.module.ts as shown in the below image

Ionic%2BHttpClientModule%2BImport%2BModule

after that, We will create one common provider for HTTP calls that is the rest provider

Just create a provider by writing the following command

 

ionic g provider rest




  

after that in our rest provider we do the following steps :

  1. Import HttpClient form @angular/common/http ==> To communicate backend services over http protocols.
  2. Import Observable from rxjs/Observable ==> rxjs means reactive extension for javascript
  3. Its a library for reactive programming.
  4. 3.Import map & catchError from rxjs/operators. ==> Operator map is use for sophisticated manipulation of collection catchError let you handle known errors.
  5. Write the below code as shown in the image.
Ionic%2BHttpClientModule

Use of HttpClientModule -Part2 :

We will now continue with our topic which is HttpClientModule in ionic 3.
After creating a common rest provider if we call the doLogin function which is created in the rest provider we need to do the following steps in our ts file.
1. Import common provider class
Ionic%2Brest%2BProvider%2BImport
2.Create constructor of the provider class.
Ionic%2Brest%2BProvider%2BConstructor
3.Call doLogin on click of the Login button
Ionic%2Brest%2BProvider%2BFunction
That’s it. We can make now multiple functions like doLogin in rest provider & call it whenever required. This is a common observable approach we use in ionic 3.

Leave a Comment