Ionic 3 angular 4 http interceptor to show download for each request

Question

I am trying to create a custom HTTP interceptor that will be used to handle loading and other additional features. (Processing the load for each request manually significantly increases the amount of code).

The problem is this: The loader is activated for each request, but loading.dismiss() does not work (loading spinner continues to be active, no errors)

My configuration:

http interceptor:

 @Injectable() export class MyHttpWrapper extends Http { private loading: any; constructor(connectionBackend: ConnectionBackend, requestOptions: RequestOptions,private loadingCtrl: LoadingController) { super(connectionBackend, requestOptions); } public get(url: string, options?: RequestOptionsArgs): Observable<Response> { this.showLoader(); return super.get(url, this.getRequestOptionArgs(options)) .finally<Response>(() => { this.hideLoader(); }); } public post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { return super.post(url, body, options); } public put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { return super.put(url, body, options); } public delete(url: string, options?: RequestOptionsArgs): Observable<Response> { return super.delete(url, options); } private getRequestOptionArgs(options?: RequestOptionsArgs) : RequestOptionsArgs { if (options == null) { options = new RequestOptions(); } if (options.headers == null) { options.headers = new Headers(); } options.headers.append('Content-Type', 'application/json'); return options; } private showLoader() { if(!this.loading){ this.loading = this.loadingCtrl.create({ dismissOnPageChange: true }); } this.loading.present(); console.log('show loader') } private hideLoader() { console.log('hide loader') console.log(this.loading) this.loading.dismiss(); } } 

app.module.ts

 export function httpInterceptorFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions, loadingCtrl: LoadingController) { return new MyHttpWrapper(xhrBackend, requestOptions, loadingCtrl); } @NgModule({ declarations: [ MyApp ], imports: [ BrowserModule, HttpModule, IonicModule.forRoot(MyApp), IonicStorageModule.forRoot() ], bootstrap: [IonicApp], entryComponents: [ MyApp ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, {provide: APP_CONFIG, useValue: AppConfig}, { provide: Http, useFactory: httpInterceptorFactory, deps: [XHRBackend, RequestOptions, LoadingController] } ] }) export class AppModule {} 

UPDATE:

tried to add a simple service (and use it in MyHttpWrapper ), nothing changes, the same problem.

 @Injectable() export class LoadingService { private loading:any; constructor(private loadingCtrl: LoadingController) { } show() { if(!this.loading){ this.loading = this.loadingCtrl.create({ dismissOnPageChange: true }); } this.loading.present(); } hide() { if (this.loading) { this.loading.dismiss(); } } } 

Answer 1

I use a subroutine HTTP interceptor in my Ionic 3 applications

This is loader.ts

 import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; import { LoadingController } from 'ionic-angular'; @Injectable() export class LoaderProvider { constructor(public http: Http, public loadingCtrl: LoadingController) { } loading: any = this.loadingCtrl.create({ content: "Please wait..." }) show() { this.loading.present(); } hide() { this.loading.dismiss(); } } 

This is an HTTP interceptor.

 import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; import 'rxjs/Rx'; import { LoaderProvider } from '../loader/loader'; /* Ionic 3 HTTP interceptor Author: iSanjayAchar (@iSanjayAchar) < [e-mail] > */ @Injectable() export class httpService { baseUrl: string = 'https://yourbaseurl.in' constructor(public http: Http, private loader: LoaderProvider) { } get(url) { this.loader.show(); return this.http.get(this.baseUrl + url) .map(resp => resp.json()) .finally(() => { this.loader.hide(); }); } post(url, body) { this.loader.show(); return this.http.post(this.baseUrl + url, body) .map(resp => resp.json()) .finally(() => { this.loader.hide(); }); } put(url, body) { this.loader.show(); return this.http.put(this.baseUrl + url, body) .map(resp => resp.json()) .finally(() => { this.loader.hide(); }); } delete(url) { this.loader.show(); return this.http.delete(this.baseUrl + url) .map(resp => resp.json()) .finally(() => { this.loader.hide(); }); } patch(url, body) { this.loader.show(); return this.http.patch(this.baseUrl + url, body) .map(resp => resp.json()) .finally(() => { this.loader.hide(); }); } } 

Now finally import this instead of http everywhere, example below

 import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { Http, Headers, RequestOptions } from '@angular/http'; import { ToastController } from 'ionic-angular'; import 'rxjs/add/operator/map'; import { AlertController } from 'ionic-angular'; import { httpService } from '../../providers/http/http'; /** * Generated class for the LoginPage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-login', templateUrl: 'login.html', }) export class LoginPage { isLoginIn: boolean = false; user: any = { email: '', password: '' } constructor(private http: httpService, private toast: ToastController) { } login() { this.http.post('/api/v1/login/', this.user) .subscribe(resp => { //Your logic }, err => { //Your logic } } }