Wie Provider überprüfen, ob HTTP-Daten bereit ist

Question

Ich verwende das ionische Beta-Framework für die mobile Entwicklung, die Angular2 verwendet, also denke ich, dies ist eher eine Angular2 Frage, da es mehr in Bezug auf die Verwendung eines Providers für HTTP-Aufrufe ist .

Meine App beginnt mit app.js. In dieser Datei rufe ich meinen Provider an, der einen HTTP-Aufruf macht, um einige Informationen im Hintergrund zu bekommen. Während dies passiert, geht der Benutzer weg von app.js und geht zu einer anderen Seite page.js. Im Hintergrund wird der http-Aufruf noch durchgeführt und ist abgeschlossen. Die Seite sollte die Daten anzeigen, die vom Anbieter stammen, aber die Daten sind noch nicht fertig. Ich bin neu bei Angular und bin nicht sicher, wie ich mit dieser Art von Situation umgehen soll. Wie kann ich auf meiner Seite meinen Anbieter anrufen, den Status des Anrufs prüfen (prüfen, ob die Daten bereit sind, ob ein Fehler aufgetreten ist oder ob überhaupt ein Anruf getätigt wurde) und die Daten abrufen, wenn sie bereit sind?

Mein app.js:

import {App, Platform} from 'ionic-angular'; 
import {TabsPage} from './pages/tabs/tabs'; 
import {FacebookFriends} from './providers/facebook-friends/facebook-friends'; 


@App({ 
    template: '<ion-nav [root]="rootPage"></ion-nav>', 
    providers: [FacebookFriends], 
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/ 
}) 
export class MyApp { 
    static get parameters() { 
    return [[Platform]]; 
    } 

    constructor(platform:Platform,facebookFriends:FacebookFriends) { 
    this.rootPage = TabsPage; 

    this.fb = facebookFriends; 

    platform.ready().then(() => { 

     this.fb.load().then((success)=>{ 
      if(success){ 
       console.log('success = ' + JSON.stringify(success)); 
      } 
     }, 
     (error)=>{ 
      console.log('Error loading friends : ' + JSON.stringify(error)); 
     }); 


    }); 
    } 
} 

Mein Provider:

import {Injectable, Inject} from 'angular2/core'; 
import {Http} from 'angular2/http'; 

/* 
    Generated class for the FacebookFriends provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 
@Injectable() 
export class FacebookFriends { 
    constructor(@Inject(Http) http) { 
    this.http = http; 
    this.data = null; 
    } 

    load() { 
    if (this.data) { 
     // already loaded data 
     return Promise.resolve(this.data); 
    } 
    // don't have the data yet 
    return new Promise(resolve => { 
     // We're using Angular Http provider to request the data, 
     // then on the response it'll map the JSON data to a parsed JS object. 
     // Next we process the data and resolve the promise with the new data. 
     var headers = new Headers(); 
          // headers.append('Content-Type', 'application/json'); 
          headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
          this.http.post(
           'http://192.168.1.45:3000/testrestapi', 
           {headers: headers} 
          ).map((res => res.json()) 
     .subscribe(data => { 
      // we've got back the raw data, now generate the core schedule data 
      // and save the data for later reference 
      this.data = data; 
     console.log('Friends Provider was a success!'); 
     console.log(JSON.stringify(data)); 
      resolve(this.data); 
     }, 
    (err)=>{ 
     console.log('Error in Friends Provider!'); 
    }, 
    ()=>{ 
      console.log('Friends Provider network call has ended!'); 
    }); 
    }); 
    } 
} 

Meine Seite:

import {Page} from 'ionic-angular'; 
import {FacebookFriends} from '../../providers/facebook-friends/facebook-friends'; 

@Page({ 
    templateUrl: 'build/pages/page1/page1.html' 
}) 
export class Page1 { 

constructor(platform:Platform,facebookFriends:FacebookFriends) { 
    this.rootPage = TabsPage; 

    this.fb = facebookFriends; 


    } 

} 

Answer 1

Sie sollten eine gemeinsame servic verwenden e mit einer Eigenschaft des Typs beobachtbare:

export class SharedService { 
    dataReadyNotifier: Observer; 
    dataReadyObservable: Observable; 

    constructor() { 
    this.dataReadyObservable = Observable.create((observer) => { 
     this.dataReadyNotifier = observer; 
    }); 
    } 

    notifyDataReady(data) { 
    this.dataReadyNotifier.next(data); 
    } 
} 

Wenn die Daten in dem Versprechen Rückruf dort würde die notifyDataReady Methode des Dienstes genannt.

benachrichtigt werden, würden Komponenten auf den Dienst zu beobachten diese Weise registrieren:

export class SomeComponent { 
    constructor(private sharedService: SharedService) { 
    this.sharedService..dataReadyObservable.subscribe((data) => { 
     // Do something with data 
    }); 
    } 

    (...) 
}