如何等待订阅完成 Angular 5? [英] How to wait for subscribe to finish Angular 5?

问题描述

我正在开发 Angular 5 应用.我收到一个错误，因为我有一个函数在另一个函数完成之前执行，因此得到一个空变量.我曾尝试将 .map 和 .subscribe 与 Observable 一起使用，但没有成功.代码如下:

I am working on an Angular 5 app. I get an error because I have a function that executes before another function is done, hence getting a null variable. I have tried to use .map and .subscribe with Observable, but didn't succeed. Here is the code:

loadData 是从我的 app.component 类调用的:

loadData is called from my app.component class:

ngOnInit() {
    this.dataService.loadData(sessionStorage.getItem(...);
}

当该函数执行时，来自data.component 类 (dataService.getData) 的另一个函数在初始化时被调用:

While that function executes, another function from data.component class (dataService.getData) is called on initialization:

constructor(private dataService: DataService) {}

ngOnInit() {
    this.dataTxt = this.dataService.getData(...);
}

这是 data.service 类:

loadData(... : void) {
    if (sessionStorage["data"] == null {
        this.http.request(...)
        .map((response: Response) => response.json()).subscribe(data => {
            ...
            sessionStorage.setItem("data", JSON.stringify(this.data));
            ...
        }
    }
}

getData(... : string){
    if (this.data == null) {
        this.data = JSON.parse(sessionStorage["data"]);
    }
    ...
}

问题是 sessionStorage[data"] 在 loadData() 完成之前为空，我多次收到此错误:

The problem is that sessionStorage["data"] is null until loadData() is done and I get this error a few times:

ERROR SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)

我明白如果我想等待订阅完成，我必须把需要等待的代码 (getData()) 放在 subscribe 调用之后.但是需要等待的函数是从其他类调用的，那怎么放呢?

I understand that if I want to wait for subscribe to finish, I have to put the code that need to wait (getData()) just after the subscribe call. But the function that needs to wait is called from other classes so how do I put it there?

推荐答案

您误以为您将代码放在之后"订阅处理程序，您需要将它放在订阅处理程序的内部，但无论如何，

you're mistaken that you'd put your code "after" the subscribe handler, you'd need to put it INSIDE of the subscribe handler, but regardless,

您需要在这里使用某种主题，在这种特殊情况下可能是 ReplaySubject...

you need to use a subject of some kind here, probably a ReplaySubject in this particular case...

private dataSource = new ReplaySubject(1) // create a private subject
data$ = this.dataSource.asObservable() // and a public observable

loadData(... : void) {
    if (sessionStorage["data"] == null {
        this.http.request(...)
        .map((response: Response) => response.json()).subscribe(data => {
            ...
            sessionStorage.setItem("data", JSON.stringify(this.data));
            this.dataSource.next(data) // set the data in the subject
            ...
        }
    }
}

然后您将订阅组件中的主题...

then you'd subscribe to the subject in your component...

ngOnInit() {
    this.dataService.data$.pipe(first()) // avoid memory leak.
      .subscribe(data => this.dataTxt = data);
}

这篇关于如何等待订阅完成 Angular 5?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！