Question

我正在尝试创建一个数据服务，该服务每隔几秒钟从我的API中提取数据，并返回API返回的两种不同数据类型的两个Observable。我是Observables的新手所以非常感谢任何帮助。

我的API返回两个json对象数组（ex {'Data1':[array of data objects], 'Data2':[array of data objects]}）。我能做类似的事吗？

@Injectable()
export class DataService {
  data: any = null;
  dataType1: DataType1Model[] = [];
  dataType2: DataType2Model[] = [];
  service: Observable;

  constructor(public http: Http) {}

  start() {
    this.service = Observable.interval(10000)
      .flatMap(() => {
        this.http.get('url')
            .map(res => res.json())
            .subscribe(data => {
              this.data = data;
              this.processData1(this.data.Data1);
              this.processData2(this.data.Data2);
            });
        })
      .subscribe()
  }

  stop(){
    this.service.unsubscribe()
  }

  getData1() {
    return this.dataType1
  }

  getData2() {
    return this.dataType2
  }
}

然后在我的组件中，我可以导入DataService并调用data1 = DataService.getData1()？

当http请求触发时，该调用是否会继续在10秒间隔内更新数据？再一次，我是新观察者的新手，对不起，如果这是完全错误的。

Answer 1

您的服务模块将是这样的

@Injectable()
export class DataService {
  constructor(private http : Http) { }

  // Uses http.get() to load a single JSON file
  getData() : Observable<DataType1Model[]> {
      return Observable.interval(10000)
                       .flatMap(this.http.get('url')
                       .map((res:Response) => res.json()));
  }
}

你的组件应该像这样 -

@Component({
  selector: 'Selector',
  template:  "Template",
  providers:[
    DataService,

  ]
})
export class DataComponent implements OnInit{
  dataItem: DataType1Model[]  ;

  constructor(private _itemData:DataService ) { }

  getData(){
    this._itemData.getData()
    .subscribe(
      // the first argument is a function which runs on success
    (data:DataType1Model[]) => {
       this.dataItem = data;
     },
     // the second argument is a function which runs on error
     err => console.error(err),
     // the third argument is a function which runs on completion
     () => console.log('done loading data')

    );
  }

  ngOnInit() {
    console.log('hello `Item` component');
    this.getData();
  }

  stop(){
     _itemData.getData()
    .unsubscribe();
  }
}

要取消订阅时，请致电停止。

Answer 2

您的方法存在的一个问题是，当您致电getData1()或getData2()时，无法保证已收到数据。

我也不知道你拨打start()的位置。

我认为在subscribe(...)上调用this.http.get(...)...是错误的。 flatMap()自行完成订阅。它预计Observable不是Subscription，但是当您致电subscribe()时，您会获得Subscription。要解决此问题，请将内部subscribe替换为do（并确保导入do运算符）或将代码从subscribe移至map。

Ionic2或Angular2 http请求间隔

2 个答案: