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

How to check provider to see if HTTP data is ready

本文关键字：HTTP 数据 是否 准备就绪 程序 何检查 检查      更新时间：2023-09-26
我正在使用使用 Angular2

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

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

我的应用.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;

  }
}

应使用属性类型为 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
    });
  }
  (...)
}
相关文章：