如何检查提供程序以查看HTTP数据是否准备就绪

Question

我正在使用离子型beta框架进行移动开发，它使用了Angular2，所以我认为这更像是一个Angular2问题，因为它更多地涉及到使用HTTP调用提供程序。

我的应用程序从app.js开始。在这个文件中，我调用我的提供者，它进行HTTP调用以获取后台的一些信息。当这种情况发生时，用户将离开app.js，转到另一个页面page.js。在后台，http调用仍在进行并已完成。页面应该显示来自提供程序的数据，但是数据还没有准备好。我对棱角很陌生，不知道如何处理这种情况。在我的页面中，我如何调用我的提供者，检查调用的状态(看看数据是否准备好了，是否发生了错误，或者是否发生了调用)，如果数据已经准备好，就获取数据。

My 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));
        });


    });
  }
}

我的提供者：

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!');
    });
    });
  }
}

我的页面

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

您应该使用具有可观察类型的属性的共享服务：

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

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

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

当数据将出现在承诺回调中时，将调用服务的notifyDataReady方法。

为了得到通知，组件将以这样的方式在可观察到的服务上注册：

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

  (...)
}