Angular 以2/4的角度定期从服务器重新加载数据

我想为我的Angular 4应用程序创建一个从服务器重新加载数据的有效机制

我的服务：

@Injectable()
export class MyService {
    getData(): Observable<string> {
        // return observable for fetching data from server
    }
}

@Injectable（）
导出类MyService{
getData（）：可观察{
//用于从服务器获取数据的可观察返回值
}
}

我的组成部分：

@Component({
    selector: 'my-component',
    templateUrl: './mytemplate.html'
})
export class MyComponent {
    myString$: Observable<string>;

    constructor(private service: MyService) {
        this.myString$ = service.getData();
    }
}

@组件({
选择器：“我的组件”，
templateUrl:“./mytemplate.html”
})
导出类MyComponent{
myString$：可观察的；
构造函数（私有服务：MyService）{
this.myString$=service.getData（）；
}
}

我的模板：

<div>
    <p>{{myString$ | aysnc}}</p>
</div>

{{myString$| aysnc}}

• myString$

  是从服务器加载的

  字符串的可观察值

• MyComponent

  可以作为多个不同的实例加载（

  myComponent1

  ，

  myComponent2

  …）
• 据我所知，通过执行

  myString$| aysnc

  ，我的组件在技术上已订阅

  myString$

  opn组件初始化，并且在组件销毁时取消订阅

我希望能够定期从服务器重新加载数据，并将其发送到多个订阅服务器（组件）。由于我不知道向服务器发送请求可能需要多少时间，

Observable.interval（）

对我来说不太好，因为如果间隔时间小于请求返回的时间，那么在前一个请求返回之前，我将遇到发送新请求的问题。 我想我想阻止发出另一个请求，直到前一个请求“解决”

getData（）

应该返回什么才能实现

我的另一个要求是在没有订阅者时不发送请求，并在新订阅者订阅时重新启动定期请求-是否可以使用

.share（）

---

谢谢

如果我理解正确，您的问题的解决方案是等待请求完成，然后执行新的请求？如果是这种情况，您可以使用concatMap。使用concatMap，每次发射都必须等待延迟的前一次发射在下一次发射之前完成

下面是一个例子：

let a = Rx.Observable.from(["data1","data2","data3","data4"]);
let b = Rx.Observable.fromEvent(document, 'click').map(x=>"asyncData");
let c = b.merge(a).concatMap(val => Rx.Observable.of(val).delay(1000))

c.subscribe(x=>console.log(x)); 

在这里，每秒都会发出一个数据流，每次单击都会获得新数据。这些新数据将每秒添加到流的末尾

所以你会得到这样的结果：

• 第二个-->“数据1”
• 第二个-->“数据2”
• （鼠标单击事件）
• 第二个3-->“数据3”
• 第二个4-->“数据4”
• second5-->“异步数据”

---

这有帮助吗？

.share（）

似乎是解决我回复问题的方法！请原谅我不理解-对于您的解决方案，我将在前一个请求完成后仅7秒发出新请求。对于此解决方案，新请求将必须等待旧请求首先完成。如果将delay方法设置为1000（如上面的示例所示），并执行3个请求，则每秒钟都会发生一次。如果在这3秒钟结束之前您提出了一个新请求，那么新请求将在第4秒钟发生。因此，在您的情况下，您必须将delay（）设置为7000，以确保每个请求间隔7秒。