如何检查提供者以查看 HTTP 数据是否已准备好

Question

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

我的应用从 app.js 开始。在这个文件中，我调用了我的提供程序，它进行 HTTP 调用以在后台获取一些信息。当这种情况发生时，用户离开 app.js 并转到另一个页面 page.js。在后台，http 调用仍在进行中并且尚未完成。该页面应显示来自提供者的数据，但数据尚未准备好。我是 Angular 的新手，不确定如何处理这种情况。从我的页面如何调用我的提供者，检查调用的状态（查看数据是否准备好，是否发生错误，或者是否已经进行了调用），如果数据准备好则获取数据？

我的 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

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

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

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

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

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

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

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

  (...)
}