Observable 稍后返回数据答案

【问题标题】：Observable is returning the data laterObservable 稍后返回数据
【发布时间】：2020-07-16 05:41:37
【问题描述】：

ngOnInit() {
   this.getTypeList();
   this.buildTemplate();
}

private getTypeList(): void {
        this.searchService.getViewTypeList(this.org)
            .subscribe(viewTypeList => {
                this.viewTypeList = viewTypeList;
            });
      }

this.buildTemplate() : void {
  console.log(this.viewTypeList);
  ****** some code work on viewTypeList***
}

问题是console.log(this.viewTypeList); 在方法中显示未定义.. 我知道这是异步调用，需要时间才能完成，但与此同时，我的下一个代码 this.getTypeList() 被执行并显示未定义。

我希望一旦数据可从 http 服务获得，我的所有剩余处理都应该完成。 someThing like me 代码不应该在没有来自服务的数据的情况下继续进行，因为它为代码中的所有休息方法提供了未定义的。或者有什么办法可以让我事先利用服务中的数据来处理它

【问题讨论】：

让 getTypedList 返回 observable 而不是订阅它。
不要试图将传统的函数风格与反应范式混合。这是大多数 rxjs 问题的根本原因。

标签： angular http promise rxjs observable

【解决方案1】：

Http 调用是异步调用。后续调用将被执行，并且不会等待 promise 被解析。

您的依赖代码应在解决后编写。

一旦 API 调用解决，而不是在 ngOnInit 中调用 buildTemplate()。

private getTypeList(): void {
    this.searchService.getViewTypeList(this.org)
        .subscribe(viewTypeList => {
            this.viewTypeList = viewTypeList;
            this.buildTemplate();  //here your data is available.
        });
}

【讨论】：

【解决方案2】：

从 ngOnInit 中移除 this.buildTemplate() 并放入订阅中。

private getTypeList(): void {
        this.searchService.getViewTypeList(this.org)
            .subscribe(viewTypeList => {
                this.viewTypeList = viewTypeList;
                this.buildTemplate();
            });
      }

【讨论】：

【解决方案3】：

在subscribe() 方法中调用this.buildTemplate()，而不是在ngoninit 中调用。

这种方式模板只会在从服务器加载数据时构建。同时，您可以显示加载状态等虚拟信息。

【讨论】：

【解决方案4】：

您应该首先检查 observable 和 promise 的工作原理以及异步和同步进程之间的区别。

如果我们看看你的情况。您使用可观察的异步过程。这是什么意思？这意味着您的代码独立工作。如果异步函数完成与否，下一行不会等待。所以如果你想在异步完成后调用这个函数，那么你有两种方法第一个是在异步函数的订阅方法中获取第二个函数。

.subscribe(viewTypeList => {
            this.viewTypeList = viewTypeList;
            this.buildTemplate(); 
        });

另一种方法是使用promise 和await 而不是observable。然后它将像同步一样工作。它将等待完成第一个函数。

【讨论】：