如何等待订阅完成 Angular 5？

Question

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

loadData 是从我的 app.component class:

调用的

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

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

constructor(private dataService: DataService) {}

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

这里是 data.service class:

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() 完成之前为空，我多次收到此错误：

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

我明白如果我想等待订阅完成，我必须把需要等待的代码 (getData()) 放在订阅调用之后。但是需要等待的函数是从其他 classes 调用的，所以我怎么把它放在那里？

Answer 1

您错误地将代码放在订阅处理程序“之后”，您需要将它放在订阅处理程序的内部，但无论如何，

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

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
            ...
        }
    }
}

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

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

如何等待订阅完成 Angular 5？

How to wait for subscribe to finish Angular 5?

rxjs

angular

angular-observable

angular5