Deixa eu ver se entendi. Se a conexão esta ruim, o loader fica muito tempo sendo mostrado até que um erro aconteça. É isso? Você quer definir um tempo e caso a conexão não seja realizada com sucesso nesse tempo você já quer cancelar. Certo?
Se minha memória esta boa, há a operação timeout
que pode ser realizada em um Observable. Primeiro, em seu AppModule.ts
você precisará registrá-la:
import 'rxjs/add/operator/timeout';
Isso não é novidade, porque no curso aprendemos a registrar o map
, lembra?
Então, agora segue um exemplo do timeout:
http
.get('http://localhost:3000/v1/fotos')
.map(res => res.json())
.timeout(2000)
.subscribe(
fotos => this.fotos = fotos,
err => console.log(err)
);
}
Se passar de 2 segundos, um erro será lançado e isso fará o callback do subscribe ser chamado.
Como no curso estamos usando Promise, você precisará fazer
http
.get('http://localhost:3000/v1/fotos')
.map(res => res.json())
.timeout(2000)
.toPromise();
O exemplo não é do curso de Ionic, mas o conceito se aplica a ele. Agora, se passar 2 segundos, a promise será rejeitada.
Acho que é por ai que você deve ir.
Exemplo da mudança em nosso projeto:
// src/app/pages/home
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public carros;
constructor(public navCtrl: NavController, private _http: Http) {
this._http
.get('https://aluracar.herokuapp.com')
.map(res => res.json())
.timeout(2000)
.toPromise()
.then(carros => this.carros = carros);
}
}
Só não esqueça de registrar o timeout
para que ele esteja disponível para você usar.