如何等待订阅完成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:

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()).但是需要等待的函数是从其他类中调用的，那么如何将它放在那里?

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屋！