loadingController while waiting for observable?

Ionic Framework ionic-v3
1

So I’m refactoring my code and made a HTTP service to handle requests. This gives an observable to the component. But I’m now sure on how to use the loadingController with this.

import {Http, Response} from '@angular/http';
import {Injectable} from '@angular/core';

import {Observable} from 'rxjs/Observable'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/timeout';

const WORDPRESS_API: string = 'https://www.nec-nijmegen.nl/wp-json/';
const VOETBALDATA_API: string = 'http://voetbalchallenge.linku-test3.nl/';

@Injectable()
export class HTTPProvider {

    constructor(private http: Http) {
    }

    getData(): Observable<object> {
        return this.http
            .get(VOETBALDATA_API + 'soccer/competitiestandis/22941?3&orderby=rank')
            .map((response: Response) => response.json().Regulier.stand)
            .timeout(10000)
            .catch((error: any) => Observable.throw(error));
    }
}

import {Component, Input} from '@angular/core';
import {LoadingController} from 'ionic-angular';
import {Http} from '@angular/http';
import {Network} from '@ionic-native/network';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';

// Providers
import {HTTPProvider} from '../../../../providers/http.provider';

@Component({
    selector: 'team-positions',
    templateUrl: 'team-positions.html'
})

export class TeamPositions {
    @Input() error: any = 'none';
    @Input() notification: object;

    teams: object;
    loader: any;

    constructor(public http: Http, public loadingCtrl: LoadingController, public network: Network, private httpProvider: HTTPProvider) {

        this.httpProvider
            .getData()
            .subscribe(
                (data: object) => this.teams = data,
                (error) => this.error = error);

        // Watch for reconnect after disconnect.
        this.network.onConnect().subscribe(() => {
            this.error = [];
            this.httpProvider
                .getData()
                .subscribe(
                    (data: object) => this.teams = data,
                    (error) => this.notification = error);
        });
    }
}

I would also love to get rid of the repeated httpProvider function in the onConnect but also not sure about that… I could put the httpProvider function in my controller in a separate function and call it but I feel like there should be a better solution. Thanks

2

Added it like this:

    loader: any = this.loadingCtrl.create();

    constructor(public http: Http, public loadingCtrl: LoadingController, public network: Network, private httpProvider: HTTPProvider) {

        this.loader.present();

        this.httpProvider
            .getData()
            .subscribe(
                (data: object) => this.teams = data,
                (error) => this.error = error,
                () => this.loader.dismiss());```
1 Like
3

I have a rule to never put loading components (or alerts, &c) in object properties. It is unclear where they are owned when you do this, and it facilitates reuse and double-dispose bugs. Instead, I always make them lexically scoped.