One of my current challenges involves creating a custom HTTP interceptor to manage loading and other additional functions efficiently. Manually handling loading for each request has led to a considerable increase in code.
The issue at hand: The loader is being activated with every request, but the loading.dismiss() function does not seem to work as expected. Despite no errors, the loading spinner remains active.
Here's an overview of 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();
});
}
// Other methods omitted for brevity
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:
After attempting to integrate a simple service (utilized within MyHttpWrapper), the problem persists without any changes in behavior. It seems like the issue lies elsewhere.
@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();
}
}
}