How to call multiple service in Ionic V4
Hello All, Today we will call multiple service & see how the observable works. In many times we have come to face the situation like multiple http request needs to call at the same time so that time operator forkJoin came into picture. When you have to call multiple HTTP requests using Angular forkJoin & having group of observable then following way is the best way to call them. So, we will see this concept by using example so that you will get clear idea about the concept. Follow the steps to multiple service call in ionic.
Steps to follow for multiple service call in ionic
Create a new page by using command line interface. write the following command to generate the new page. If you want to know more about how to use generate commands then click here.
ionic g page multiple-service-call
Create a service page so that we can place our service calls at separate page
ionic g service http-service-provider
Add dependencies of HTTPCLIENTMODULE in app.module.ts file as shown below
Import the HttpClientModule from @angular/common/http as shown below
import { HttpClientModule } from '@angular/common/http'
Add into Import of app.module.ts file as shown below
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
Open http-service-provider.service.ts file & write below code
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, of, throwError, forkJoin } from "rxjs";
@Injectable({
providedIn: 'root'
})
export class HttpServiceProvider {
responseRequest1: any;
responseRequest2: any;
constructor(private http: HttpClient) { }
callServerRequest(): Observable<any> {
this.responseRequest1 = this.http.get('SERVER URL1 HERE');
this.responseRequest2 = this.http.get('SERVER URL2 HERE');
return forkJoin([this.responseRequest1, this.responseRequest2]);
}
}
Now, We need to call above method callServerRequest() from multiple-service-call.page.ts file. So write below code in your multiple-service-call.page.ts file
import { Component, OnInit } from '@angular/core';
import { HttpServiceProvider } from "../http-service-provider.service";
import { LoadingController } from "@ionic/angular";
@Component({
selector: 'app-multiple-service-call',
templateUrl: './multiple-service-call.page.html',
styleUrls: ['./multiple-service-call.page.scss'],
})
export class MultipleServiceCallPage implements OnInit {
subjects: any = [];
marks: any = [];
constructor(private loadingCtrl: LoadingController, private httpCtrl: HttpServiceService) { }
ngOnInit() {
this.getResponse();
}
async getResponse() {
const loading = await this.loadingCtrl.create({
message: 'Please wait...'
});
await loading.present();
this.httpCtrl.callServerRequest()
.subscribe(response => {
console.log("Success :" + response);
let tempSubjects = response[0];
let tempMarks = response[1];
this.subjects.push(tempSubjects);
this.marks.push(tempMarks);
loading.dismiss();
}, err => {
console.log("Error :" + err);
loading.dismiss();
});
}
}
Update the multiple-service-call.page.html as follows
<ion-header>
<ion-toolbar>
<ion-title>Call Multiple Services Ionic 4 Example</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1>Details of Subjects</h1>
<ion-list *ngFor = "let subject of subjects; let i=index;">
<ion-item>
<ion-label>Id</ion-label> {{subject.id}}
</ion-item>
<ion-item>
<ion-label>Subject Name</ion-label> {{subject.name}}
</ion-item>
<ion-item>
<ion-label>Standard</ion-label> {{subject.standard}}
</ion-item>
</ion-list>
<h1>Details of Marks</h1>
<ion-list *ngFor = "let mark of marks; let j=index;">
<ion-item>
<ion-label>Id</ion-label> {{mark.id}}
</ion-item>
<ion-item>
<ion-label>Subject Name</ion-label> {{mark.subject}}
</ion-item>
<ion-item>
<ion-label>Score</ion-label> {{mark.score}}
</ion-item>
</ion-list>
</ion-content>
If you want the SERVER URL1 output JSON then have a quick look at below file
{
"id" : "1",
"name" : "Maths",
"standard":"10"
}
If you want the SERVER URL2 output JSON then have a quick look at below file
{
"id": "1",
"subject": "Maths",
"score": "45"
}
Output
