3

我正在尝试创建一个数据服务，它每隔设定的秒数从我的 API 中提取数据，并返回 API 返回的两种不同数据类型的两个 Observable。我是 Observables 的新手，所以任何帮助都将不胜感激。

我的 API 返回两个 json 对象数组（例如{'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 秒的间隔内继续更新数据？再说一次，我是 observables 的新手，如果这是完全错误的，我很抱歉。

4

2 回答 2

3

您的服务模块将是这样的

@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();
  }
}

当你想取消订阅时调用 stop。

于 2016-05-11T07:31:15.560 回答
1

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

我也看不到你在哪里打电话start()。

我认为打电话subscribe(...)是this.http.get(...)...一个错误。flatMap()自己订阅。它期望 a Observablenot aSubscription但是当您调用subscribe()a时Subscription，您会得到。要修复它，请将内部替换subscribe为do（并确保do导入运算符）或将代码subscribe从map.

于 2016-05-11T04:32:56.810 回答