MULTIPLE SERVICE CALL USING IONIC V4 | FORKJOIN | ADVANCE

Share the post

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

output
Output

Leave a Comment