问题描述: 在使用Angular Observale从服务器获取数据时,发现在一定的时间间隔后无法获取到最新的数据。
解决方法:
ReplaySubject
:
ReplaySubject
是rxjs中的一种Subject,它可以记录最新的n个值并在订阅时发送给订阅者。可以在服务中创建一个ReplaySubject
,并在获取数据时将数据发送给订阅者。import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable()
export class DataService {
private dataSubject: ReplaySubject = new ReplaySubject(1);
constructor(private http: HttpClient) { }
getData(): Observable {
return this.dataSubject.pipe(
tap(() => {
// 每次获取数据时,发送一个请求到服务器获取最新数据
this.http.get('api/data').subscribe(data => {
this.dataSubject.next(data);
});
})
);
}
}
在组件中订阅数据:
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
data: any;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.data = data;
});
}
}
这样,在每次获取数据时,都会发送一个请求到服务器获取最新的数据并更新订阅者。
timer
和switchMap
:
可以使用rxjs中的timer
创建一个定时器,定时发送请求到服务器获取最新数据。然后使用switchMap
将获取到的数据发送给订阅者。import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, timer } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }
getData(): Observable {
// 每隔一段时间发送请求获取最新数据
return timer(0, 5000).pipe(
switchMap(() => this.http.get('api/data'))
);
}
}
在组件中订阅数据的方式与上面的方法相同。
请根据实际情况选择适合的方法解决问题。